Scroll event is not fired inside directive - angular.js

Question

I'm stucked with problem. I have a directive for infinite-scroll where I listen for scroll event. The problem is that scroll event is only fired when I'm binding to $window:

angular.element($window).bind('scroll', function () {
  console.log('Gogo!'); //works!
});

element.bind('scroll', function () {
  console.log('Gogo!'); //doesn't work... :(((
});

Directive is inside ng-view I found this question, looks very similar to my problem - Binding to events in a directive which is inside a ng-view doesn't work

Anybody knows how to solve this?

My directive:

directives.directive('scrolly', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var raw = element[0];

            element.bind('scroll', function () {
                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});

My view:

<ul class="items-wrap" scrolly="showMore()">
   <li class="item" ng-repeat="item in items">{{item.name}}</li>
</ul>

Please paste your view, and directive code.

Matt Way
– Matt Way

2014-02-24 14:03:52 +00:00
Commented Feb 24, 2014 at 14:03 — Matt Way
– Matt Way, Commented Feb 24, 2014 at 14:03
@MattWay added code snippets

Kosmetika
– Kosmetika

2014-02-24 14:09:21 +00:00
Commented Feb 24, 2014 at 14:09 — Kosmetika
– Kosmetika, Commented Feb 24, 2014 at 14:09

Ben Lesh · Accepted Answer · 2014-02-24 14:45:18Z

28

It's likely because the element you're binding to doesn't "scroll".

The node that you're actually scrolling (the document, or maybe a div with a scroll overflow) is the thing that actually fires the event.

Try injecting $document into your directive and setting up the scroll event on that:

$document.bind('scroll', function (){});

Also, ditch the if statement on the inside of handler until you're sure you have the event firing properly, then add it back.

Just to start:

app.directive('scrolly', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            $document.bind('scroll', function () {
                scope.$apply(attrs.scrolly);
            });
        }
    };
});

Then work in your examination of the element positioning and other logic.

I hope that helps.

answered Feb 24, 2014 at 14:45

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

3 Comments

Anil Vangari Over a year ago

+1 It's likely because the element you're binding to doesn't "scroll" - is the exact reason why scroll event didn't fire. In my case table is inside div and div can scroll but not table.

Didier68 Over a year ago

@Ben Lesh, +1 because I had the same problem: "scrolly" wasn't fired because of "overflow-x: none;" on my <div> ! (tested on Chrome 54 and I.E. 11). The solution is to set the style "overflow: scroll; "

Didier68 Over a year ago

I think it is a bug from Angular, because it works fine when using pure JS like "document.getElementById("myDIV").onscroll = function() {....}" with the style "overflow-x: none;"

Matt Way · Accepted Answer · 2014-02-24 14:22:48Z

14

I have created a fiddle for you here: http://jsfiddle.net/ADukg/4831/

The interesting thing is that I used your exact code, and everything seems to trigger fine (see all the littered console.log() calls). I suspect your problem has to do with your CSS styling though, as without the right use of overflow, I could not get the scroll event to trigger.

answered Feb 24, 2014 at 14:22

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

2 Comments

Kosmetika Over a year ago

yeah, when I'm adding overflow: scroll to the ul it fires event.. but it's not nice regarding the ui..

Asad Over a year ago

hi @Matt Way when i use this code this give me error on scope.$apply(attrs.scrolly) undefined . y it is so can u help me ?

Collectives™ on Stack Overflow

Scroll event is not fired inside directive - angular.js

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related