javascript - Jquery Mobile 阻止 $(window).scroll 事件触发

Question

我是新人，请温柔点。我已经查看了这些关于使用 jquery .scroll() 事件的帖子，但没有运气实现有效的修复。

http://stackoverflow.com/questions/5686629/jquery-window-scroll-event-does-not-fire-up
http://stackoverflow.com/questions/19375636/jquery-onscroll-not-firing-the-event-while-scrolling

我在一个使用 Jquery Mobile 的网站上工作。当用户垂直滚动页面时，我已经包含了一个小脚本来在背景图像上产生视差效果。是这样写的:

$(window).on('scroll', function(){
    $('.slider').each(function(r){
        var pos = $(this).offset().top;
        var scrolled = $(window).scrollTop();
        $('.slider').css('background-position-y', -(scrolled * 0.3) + 'px');
    });
});

当我在页面加载后在控制台中输入这段代码时，它的效果非常好。当作为我的自定义脚本的一部分加载时，它什么也不做。它位于我的 main.js 文件的末尾，这是我的 HTML 中引用的最后一个 .js，紧接在 JQM CDN 分发链接之后。

    ...</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src='js/buildpage.js'></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src='js/main.js'></script>
</html>

我已经尝试用 $(windows).scroll(function(){alert('scroll')}) 代替我的视差脚本，这会导致单个警报作为页面当 JQM 初始化和修改布局时调整大小，然后没有进一步的。页面加载后在控制台中重新输入该行会导致窗口滚动时发出警报。

如果我注释掉 JQM 链接，视差脚本就可以正常工作。

总结: 视差脚本依赖于 .scroll()。

视差脚本是 HTML 中最后引用的 .js 中的最后一行。

如果与引用的脚本内嵌加载，Parallax 脚本将不起作用。

如果在页面加载后在开发控制台中输入视差脚本，Parallax 脚本可以正常工作 (Chrome)。

禁用 JQM 会产生预期的效果...但现在 JQM 已关闭! :(

提前感谢您的指导和智慧。

Answer 1

从 JQM 1.3 升级到 1.4 后，我遇到了类似的问题。为我解决的是使用 scrollstart 或 scrollstop 而不是 scroll 事件(参见 http://api.jquerymobile.com/category/events/ )并将其附加到 document 而不是 window。所以

$(document).on('scrollstart', function(){     //or 'scrollstop'
    console.log("I'm scrolling!");
    //your code here
});