Jquery移动防止$(窗口).scroll事件被触发

时间:2014-09-02 22:22:47

标签: javascript jquery html jquery-mobile

我是新人,请保持温柔。我已经使用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()。

Parallax脚本是HTML中引用的最后一个.js中的最后一行。

如果使用引用的脚本内联加载,则视差脚本不起作用。

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

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

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

1 个答案:

答案 0 :(得分:3)

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

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