Will vanilla javascript scroll event work on angularjs

Question

I want to log the offset of window from the top of document but jquery scroll is not working. Will vanilla javascript scroll event listener work in angular?

app.directive('owlCarouselItem', function($touch, $timeout, $rootScope, $window){
    return {
        restrict: 'C',
        transclude: false,
        link: function(scope, element) {
            // this is the part of my directive the on scroll event is not firing
                $('html, body').on('scroll', function() {
                    if($(this).scrollTop() == 0){
                        console.log($(this).scrollTop());
                        canSwipeDown = true;
                    }else{
                        console.log($(this).scrollTop());
                        canSwipeDown = false;
                    }
                });

Can you show us what you've done and where in the controller/directive etc you are implementing this? jQuery should work fine to detect scrolling, especially in AngularJS (Not Angular 2) — JosephGarrone
– JosephGarrone, Commented Sep 15, 2016 at 6:34
why are you using restrict: C? are you seriously using owlCarouselItem as a comment? — Dan
– Dan, Commented Sep 15, 2016 at 9:54

Dan · Accepted Answer · 2016-09-15 09:53:21Z

1

Try this code using angular.element($window):

.directive('scrollDir', function($window) {
    return {
        restrict: 'EAC',
        link: function(scope, attrs, element) {
            var canSwipeDown = false
            // this is the part of my directive the on scroll event is not firing
            angular.element($window).on('scroll', function() {
                canSwipeDown = element.scrollTop() === 0
                scope.$apply()
            });
        }
    };
});

And you can stick directive to body tag like this HTML:

<body scroll-dir>

edited Sep 15, 2016 at 9:53

Dan

10.6k2 gold badges41 silver badges68 bronze badges

answered Sep 15, 2016 at 9:42

Michal Kucaj

6916 silver badges15 bronze badges

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

1 Comment

Dan Over a year ago

I've improved your code, removed redundancies and added $scope.$apply; event listeners are not part of the angular digest cycle. You should probably explain to the OP how they would consume canSwipeDown.

Collectives™ on Stack Overflow

Will vanilla javascript scroll event work on angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related