简体   繁体   中英

Dynamically changing the page height triggers a scroll event

I have a slider on the page when the slides are automatically switched, its height changes. This for some reason triggers a scroll event. I want the scroll event to only work when the user physically interacts with the page (scrolls it), not when the height of an element on the page changes dynamically.

// Before
function scrollShowHideHeader() {
   var position = $(window).scrollTop();

   $(window).on('scroll', function () {
      var scroll = $(window).scrollTop();
            
       if (scroll > position) {
          $('#site-header').addClass('is-hidden');
       } else {
          $('#site-header').removeClass('is-hidden');
       }
       position = scroll;
   });
}


// After
function scrollShowHideHeader() {
        let position = $(window).scrollTop();
        let prevPageHeight = $('#site-content').outerHeight();

        $(window).on('scroll', () => {

            let scroll = $(window).scrollTop();
            let lastPageHeight = $('#site-content').outerHeight();

            if (lastPageHeight === prevPageHeight) {
                if (scroll > position) {
                    $('#site-header').addClass('is-hidden');
                } else {
                    $('#site-header').removeClass('is-hidden');
                }
                position = scroll;
            }
            prevPageHeight = lastPageHeight;
        });
    }
function scrollShowHideHeader() {
        let position = $(window).scrollTop();
        let prevPageHeight = $('#site-content').outerHeight();

        $(window).on('scroll', () => {

            let scroll = $(window).scrollTop();
            let lastPageHeight = $('#site-content').outerHeight();

            if (lastPageHeight === prevPageHeight) {
                if (scroll > position) {
                    $('#site-header').addClass('is-hidden');
                } else {
                    $('#site-header').removeClass('is-hidden');
                }
                position = scroll;
            }
            prevPageHeight = lastPageHeight;
        });
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM