javascript - Scroll event in AngularJS - Stack Overflow

admin管理员组

文章数量:1195562

I have a div with a scrollbar in it. Now I want to get an event, that triggers every time, the user scrolls.

Is that possible in AngularJS, or do I have to use jQuery for that?

Edit: I came up with following so far:

// JS
.directive('scroll', function() {
    return function(scope, element, attrs){

        angular.element(element).bind("scroll", function(){
            console.log(1);
        });
    };
});

// HTML
<div class="wrapper" style="height: 1550px" scroll>
[...]
</div>

But that does not work (I don't see any logs in my Firebug-Console).

I have a div with a scrollbar in it. Now I want to get an event, that triggers every time, the user scrolls.

Is that possible in AngularJS, or do I have to use jQuery for that?

Edit: I came up with following so far:

// JS
.directive('scroll', function() {
    return function(scope, element, attrs){

        angular.element(element).bind("scroll", function(){
            console.log(1);
        });
    };
});

// HTML
<div class="wrapper" style="height: 1550px" scroll>
[...]
</div>

But that does not work (I don't see any logs in my Firebug-Console).

• javascript
• angularjs

Share Improve this question Follow edited Apr 9, 2016 at 10:33 Saksham 9,38099 gold badges4646 silver badges7575 bronze badges asked Oct 27, 2014 at 13:07 TreamTream 1,05422 gold badges1515 silver badges3030 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 16

Solution for Angular 1.6:

.directive("scroll", function () {
return {
  link: function(scope, element, attrs) {
      element.bind("wheel", function() {
         console.log('Scrolled below header.');
      });
  }
}

})

Use "wheel" instead of "scroll". It takes me few hours to find.

You would be using jquery for adding the event listener, and maybe inside an angularjs directive to attach it to an element.

page.html:

<div my-scroller>

myscroller.js:

app.directive('myScroller', function(){

    return {

        restrict: 'A',
        link: function(scope,elem,attrs){
            $(elem).on('scroll', function(evt){
               console.log(evt.offsetX + ':' + evt.offsetY);
            });
        }

    }

});

Edit: of course you don't even need to use jquery. Angular's jqLite suffices for this, you would just call element without the jquery wrapping:

elem.on('scroll', ...

Sergey's answer helped me a little, but what ended up working for me was this:

.directive("scroll", function ($window) {
   return {
      link: function() {
         angular.element($window).bind("wheel", function() {
            console.log('Scrolling');
         });
      }
   }
})

本文标签： javascriptScroll event in AngularJSStack Overflow