How to handle jQuery(window).scroll functions efficiently in jQuery?

Question

This is my current code and feels like it's not very efficient and would perhaps be better if Timer/Timeout is used. However, I'm lost as to how to go about it.

Could someone help? Not very efficient with javascript. My JS guy is on leave.

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

Seems fine as far as efficiency goes, but you probably want to debounce (throttle) those conditions so it doesn't fade on every scroll movement. — adeneo
– adeneo, Commented Feb 5, 2017 at 19:51

kavinhuh · Accepted Answer · 2017-02-07 11:23:58Z

It would be good if you differentiate the scroll direction by binding scroll function ,I have a fiddle,hope it helps.

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

Collectives™ on Stack Overflow

How to handle jQuery(window).scroll functions efficiently in jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related