Jquery mobile如何阻止$(window).scroll事件触发

Question

我是新手，请多指教。我已经阅读了关于使用jQuery .scroll()事件的这些帖子，但是在实现工作修复方面并没有成功。

https://dev59.com/rm025IYBdhLWcg3w_a-r
https://dev59.com/a2Ik5IYBdhLWcg3wU8yo

我正在开发一个使用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 文件中的最后一行。 如果与引用的脚本内联加载，则无法正常运行视差滚动脚本。 如果在页面加载后输入到开发人员控制台中（Chrome），视差滚动脚本可以正常工作。 禁用JQM将产生所需的效果...但现在JQM已关闭! :(

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

- Daniel J Chow

---

经过数小时的苦思冥想，我回家制作了一个测试页面，发现某种原因下，效果按预期工作了... 但是我发现在切换页面视图后，效果再次停止工作，直到重新加载。 - Daniel J Chow

这个 JSFiddle 在网上可以正常运行，但是我的本地版本却不行。我输了。谢谢观看。http://jsfiddle.net/m17aqe6j/ - Daniel J Chow

这是我的本地版本副本。视差在切换到第2页并返回第1页后中断。我已将未包含在jsfiddler中的任何内容注释掉，所以不确定为什么结果会有所不同？ http://new.seianesthesia.com/test.html - Daniel J Chow

我后来发现，这种视差解决方案在iOS设备上不起作用，因为在滚动期间脚本执行被停止。我正在重写网站以使用skrollr.js代替。 - Daniel J Chow

Answer 1

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

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

- margold

---

非常感谢！这解决了我的问题 - jQuery Mobile在历史记录中返回后使滚动事件无法在window上工作。 - EpicPandaForce