如何在 jQuery 中有效地处理 jQuery(window).scroll 函数？答案

【问题标题】：How to handle jQuery(window).scroll functions efficiently in jQuery?如何在 jQuery 中有效地处理 jQuery(window).scroll 函数？
【发布时间】：2017-02-05 19:31:16
【问题描述】：

这是我当前的代码，感觉效率不是很高，如果使用 Timer/Timeout 可能会更好。但是，我不知道该怎么做。

有人可以帮忙吗？使用 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();
                }
            });
        }
    };
})

【问题讨论】：

就效率而言似乎还不错，但您可能想消除 (throttle) 这些条件，这样它就不会在每次滚动移动时消失。
我该怎么做？

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

如果你通过绑定滚动功能来区分滚动方向就好了，我有一个小提琴，希望对你有帮助。

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

【讨论】：