will vanilla javascript滚动事件在angularjs上工作

时间:2022-08-25 18:30:42

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?

我想从文档顶部记录窗口的偏移量,但jquery滚动不起作用。将vanilla javascript滚动事件监听器工作在角度?

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;
                    }
                });

1 个解决方案

#1


1  

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

使用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:

你可以像这样的HTML将指令粘贴到body标签:

<body scroll-dir>

#1


1  

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

使用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:

你可以像这样的HTML将指令粘贴到body标签:

<body scroll-dir>