13

How can I bind scroll event on element in AngularJS directive ?

I bind scroll on $window, but now i need to change it to this class ".body-wrapper" (angular.element(document.queryselector(.body-wrapper)) doesn't work) .

Any ideas ?

angular.element($window).bind("scroll", function () { 
   ...
})
1
  • 1
    Here's a nice example that supports mouse wheel scrolling even if the element doesn't have scrollbars and also can tell which direction you are scrolling in demo.sodhanalibrary.com/angular/directive/… Commented May 3, 2019 at 5:51

4 Answers 4

12

No reason it shouldn't work.

This simple example shows it does-

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  angular.element(document.querySelector('.myDiv')).bind('scroll', function(){
      alert('scrolling is cool!');
    })
});

Plunker example

if for some reason it is not working, post full code.

Edit after discussion:

Eventually the problem is with the specific event for "scroll", it probably collides with another event.

Changing the event to "mousewheel" did the trick.

Working fiddle

Sign up to request clarification or add additional context in comments.

8 Comments

Thanks , but how can i use it in directive ? angular.element(document.querySelector('.ngscroll-container')).bind('scroll', function(){ alert('scrolling is cool!'); }); Doesnt work
Is the ".ngscroll-container' is in the html template of the directive?
Its generated from another angular directive (Custom scrollbar)
Can you post your code or part of it that is working and showing the bug?
Can you add the html to the fiddle?
|
11

You would normally make a new directive for that.

app.directive('scroll', [function() {
  return {
    link: function (scope, elem, attrs) {
      elem.on('scroll', function (e) {
        // do your thing
      });
    })
  }
}]);

Now, use this directive where ever you need to add the scroll event.

<div class='.body-wrapper' scroll></div>

Directives are the preferrd and cleaner approach to accessing DOM elements in Angularjs, instead of angular.element.

2 Comments

This way is good too , but i have some problem ... in main directive im already used another elem . I can use 2 directive but its not the best way i think :/
Can you elaborate on that? Having two directives on one element, or having directives inside another directive's template is not an issue. You probably are already using other directives (like ngClick, ngHref) in that manner.
4

The cleanest way I have found is:

(function() {
  angular
  .module('yourAppName')
  .directive('scrollDirective', ['$window', scrollDirective])

  function scrollDirective($window) {
    return {
      link: function (scope, element, attrs) {
        var handler;
        $window = angular.element($window);

        handler = function() {
          console.log('scrolling....')
        };

        $window.on('scroll', handler);
      }
    };

  };

})();

then you can use it in your Html as:

 <div scroll-directive="">a long list goes here</div>

Comments

3

mousewheel event triggers the scroll event to the window than a scroll event.

angular.element($window).bind('mousewheel', function () {  
  // enter code here  
}

1 Comment

You can scroll an element without using the mouse wheel, so this answer may not work in all cases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.