javascript - $(window).scroll 函数在移动设备上不起作用

Question

我在我的网站上使用 $(window).scroll 事件触发功能，一切都很好，只是它不适用于移动设备。

这是我正在使用的代码:

$(window).scroll(function(){
    var wh =  $(window).height();
    var scrolledFromtop = $(window).scrollTop();
    if( scrolledFromtop > wh ){

        $('html').addClass('scrolled');
    }else{
        $('html').removeClass('scrolled');
    }
});

我也尝试过这段代码，但没有成功:

document.addEventListener("touchmove",aaa, false);
function aaa(){
    var wh =  $(window).height();
    var scrolledFromtop = $(window).scrollTop();
    if( scrolledFromtop > (wh) ){           
    $('html').addClass('scrolled');
    }

    else {
        $('html').removeClass('scrolled');
    }

};

谁能帮帮我吗？

Answer 1

某些(？)移动浏览器在滚动完全停止之前不会触发该事件。

您可以尝试一些方法来解决此问题:

1. 使用setInterval
2. 使用触摸事件
3. 另一种解决方案是完全禁用 native 滚动并使用 JavaScript 来模拟滚动。

$('窗口').on('touchmove', 函数(事件) { //防止窗口滚动。 event.preventDefault();

   //Do something like call window.scrollTo to mimic the scrolling
   //request the user made.
});

您可以在这篇精彩的文章中找到更多相关信息:

http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/