Question

在我的Angular App中，当用户向下滚动50个像素时，我希望显示一个DOM元素。

有没有办法在Angular中做到这一点？

Answer 1

使用javascript

window.pageYOffset

或Jquery

$(window).scrollTop()

您可以在类似 -

的滚动侦听器中设置它们

window.addEventListener('scroll', function() {
   var x = window.pageYOffset;
   if(x >= 50){
   //apply styles
   }else{
   //remove styles
  }
 }

（你也可以使用jquery）。然后通过检查您是否高于或低于50来为元素添加/取消样式。这是基本的想法。

Answer 2

您可以使用将滚动偏移存储在变量中的指令，并将其与ng-show结合使用以显示和隐藏元素：

app.directive('scrollObserver', function($window) {
  return {
    scope: {
      scroll: '=scrollObserver'
    },
    link: function(scope) {
      angular.element($window).on('scroll', function(){
          scope.scroll = angular.element($window).scrollTop();

          // event listener does not trigger angular apply cycle automatically
          scope.$apply();
      });
    }
  };
});

然后，您可以使用此指令根据当前滚动位置隐藏元素：

<span ng-show="scroll > 50" scroll-observer="scroll">Display me on scroll!</span>

页面向下滚动50像素时显示DOM元素

2 个答案: