如何在用戶滾動到角度js頂部時獲取事件？

可以請你告訴我如何獲得事件，當用戶滾動到頂部。其實我在我的例子中使用ng-repeat。我想要獲得事件，當用戶滾動到底部並滾動到頂部。我有一個div在其中我們採用NG-重複，可以得到頂級的事件時scrolling.Actually後用戶移動到頂部我需要顯示警報，當用戶滾動至底部和角。這裏的div的頂部是我的代碼如何在用戶滾動到角度js頂部時獲取事件？

<body ng-controller="MyController"> 
<div style="width:90%;height:150px;border:1px solid red;overflow:auto"> 
<div ng-repeat="n in name">{{n.name}}</div> 
</div>

來源

2015-06-08 Shruti

在滾動事件中使用離子滾動。 http://ionicframework.com/docs/api/directive/ionContent/ –

我將如何得到滾動頂部和底部的事件 – Shruti

這是一個無角的方式，但你可以在一個指令，它也允許重用包起來：

使用JavaScript事件偵聽器：

div.addEventListener('scroll', function(){ 
    if(this.scrollTop===0) 
    //do your stuff

}）;

如果您對此偵聽器中的作用域變量進行了任何更改，請務必使用$apply。

來源

2015-06-08 15:36:35

，但我需要角js.please刪除你的答案，..！ – Shruti

您可以將指令放在您的可滾動div上，聽取scroll事件並檢查到達頂部或底部。

因此，使用你的HTML，你的DIV應該是這樣的：

<div exec-on-scroll-to-top="ctrl.handleScrollToTop" 
    exec-on-scroll-to-bottom="ctrl.handleScrollToBottom" 
    style="width:90%;height:150px;border:1px solid red;overflow:auto"> 
    <div ng-repeat="n in name">{{n.name}}</div> 
</div>

有了新的指示exec-on-scroll-to-top和exec-on-scroll-to-bottom增加。每個指定控制器中的一個函數，當指令檢查的特定事件發生時應執行該函數。

exec-on-scroll-to-top是這樣的，只是檢查了滾動div的scrollTop屬性爲0：

myapp.directive('execOnScrollToTop', function() { 

    return { 

    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var fn = scope.$eval(attrs.execOnScrollToTop); 

     element.on('scroll', function (e) { 

     if (!e.target.scrollTop) { 
      console.log("scrolled to top..."); 
      scope.$apply(fn); 
     } 

     }); 
    } 

    }; 

});

而且exec-on-scroll-to-bottom是這樣的（記住，一個元素完全滾動時，其(scrollHeight - scrollTop) === clientHeight）：

myapp.directive('execOnScrollToBottom', function() { 

    return { 

    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var fn = scope.$eval(attrs.execOnScrollToBottom), 
      clientHeight = element[0].clientHeight; 

     element.on('scroll', function (e) { 
     var el = e.target; 

     if ((el.scrollHeight - el.scrollTop) === clientHeight) { // fully scrolled 
      console.log("scrolled to bottom..."); 
      scope.$apply(fn); 
     } 
     }); 
    } 

    }; 

});

Here's a plunk。打開控制檯查看滾動到達頂部或底部時記錄的消息。

來源

2015-06-11 01:29:42 MikeJ

如何在用戶滾動到角度js頂部時獲取事件？

回答

相關問題