javascript - 如何在 jQuery 中高效处理 jQuery(window).scroll 函数?

标签 javascript jquery angularjs angularjs-directive

这是我当前的代码,感觉效率不是很高,如果使用计时器/超时可能会更好。但是,我不知道如何去做。

有人可以帮忙吗?使用 JavaScript 效率不高。我的 JS 人员正在休假。

app.directive('ScrollBar', function () {
    return {
        restrict: 'A',
        scope: {},
        link: function postLink(scope, elem, attrs) {
            jQuery(window).scroll(function(){
                var SBar = jQuery("#ScrollStop").offset();
                var screenPosition = jQuery(document).scrollTop() + window.innerHeight;
                if (screenPosition < SBar.top) {
                    jQuery(".ScrollClass").fadeIn();
                }
                if (screenPosition >= SBar.top) {
                    jQuery( ".ScrollClass" ).fadeOut();
                }
            });
        }
    };
})

最佳答案

如果能通过绑定(bind)滚动函数来区分滚动方向就好了,我有一个 fiddle ,希望对你有帮助。

http://jsfiddle.net/kavinhuh/17hca7wa/

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

            element.bind('scroll', function () {
                console.log('in scroll');
                if(raw.scrollTop < lastScrollTop)
              {
              alert("scroll up");
              lastScrollTop = raw.scrollTop;
              }
              else{
              lastScrollTop = raw.scrollTop;
              }

                if (raw.scrollTop + raw.offsetHeight > raw.scrollHeight) {
                    scope.$apply(attrs.scrolly);
                }
            });
        }
    };
});

关于javascript - 如何在 jQuery 中高效处理 jQuery(window).scroll 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42056298/

相关文章:

javascript - 如何触发 :hover transition that includes three overlapping div elements (Venn diagram)

javascript - jQuery 提交问题

javascript - 我怎样才能用Css和Jquery应用这个效果

jquery - 当标签具有 "required"属性时,如何使用 css 在特定标签的父标签上设置字体粗细?

javascript - 带逗号分隔符的 ng-repeat 输入

javascript - chrome扩展加载外部js

javascript - jQuery:计算子项数量,显示为字符串

javascript - Angular ui.router 执行多个状态

javascript - 按钮的 Jquery 单击事件在 ng-if div 内不起作用

javascript - Angularjs 替换现有的表情符号显示