jQuery Mobile 滚动事件答案

【问题标题】：jQuery Mobile Scroll EventsjQuery Mobile 滚动事件
【发布时间】：2015-12-18 04:24:04
【问题描述】：

在让滚动系列事件发挥作用时遇到问题（完全不符合设计）。一直在浏览有关此的所有文章、代码建议和其他帮助主题，但没有人能解释为什么这个示例根本不起作用：

基本页面html：

<!DOCTYPE html> 
<html> 
<head> 
  <title>JQM Test</title>

   <script src="/inc/jQuery/jquery-1.11.3.js"></script>
   <script src="/inc/jQuery/mobile/jquery.mobile-1.4.5.min.js"></script>
   <script type="text/javascript">
   var scroll = 0;
   $(function() {
       $(window).on('scroll',function(e) {
           console.log("Scrolled - "+scroll);
           scroll++;
       });
   });
   </script>
</head>
<body>
    Contents blah blah.
</body>
</html>

好的，如果您复制粘贴，则需要替换包含文件，并且版本可能不同。 Anwyays 的行为。当我取出 jquery.mobile 包含时，脚本按预期工作，只要滚动位置发生变化，就会将滚动注释记录到控制台中。

当我包含 jquery.mobile 时，它会在页面加载时触发一次，仅此而已。已尝试在 jquery 脚本部分、scrollstart 和 scrollstop 事件中更改文档/窗口。甚至尝试使用本机 javascript 将偶数显式绑定到滚动。同样的结果，没有 jqm 包含一切正常，当我包含 jqm 时失败。

有人可以向我解释为什么 JQM 的东西会破坏滚动功能吗？

编辑：

已尝试以下 JS 函数，结果完全相同（在添加 JQM 包含之前的函数）

    $(document).on("scrollstart",function(){
           ****

    $(document).on("scrollstop",function(){
        ****

    $(window).on("scrollstart",function(){
           ****

    $(window).on("scrollstop",function(){
        ****


    $(document).scrollstart(function(){
           ****

    $(document).scrollstop(function(){
        ****

    $(window).scrollstart(function(){
           ****

    $(window).scrollstop(function(){
        ****

 window.onscroll=myFunction;

 document.onscroll=myFunction;

 window.attachEvent("scroll",myFunction,false);

 document.attachEvent("scroll",myFunction,false);

【问题讨论】：

@FraserCrosbie 我正在添加一个编辑，其中明确包含所有这些不起作用的建议。我确实提到我已经尝试了所有这些，同样的结果。
是的，我评论后就看到了。您的代码在 jsfiddle jsfiddle.net/nzwodyte 上运行良好。您使用的是什么浏览器/操作系统？
我使用 chrome + firefox 进行所有开发，两者的结果相同。您的 jsfiddle 不包含 jqm frameowkr 文件。添加：
有，看看外部资源
好的，所以它必须是结合了 jquery 和 jqm 的东西。奇怪的是我的 JQM 没有 jquery 基础就不能工作？？？你有合并的吗？

标签： javascript jquery css jquery-mobile

【解决方案1】：

试试这个：

   $(function() {
       $(window).on('scroll',function(e) {
           console.log("Scrolled - "+scroll);
           window.scrollBy(100, 0); // for scroll horizontally.
       });
   });

【讨论】：

我感谢您的输入，但问题是该事件不会由于 JQM 中的某些内容而触发，无论您在函数中放置什么内容都不会触发，除非我不包含JQM 框架 JS 文件。
试试 window.onReady() 函数，这样行吗？

【解决方案2】：

在@FraserCrosbie 的帮助下，我发现我忽略了一些 CSS：https://jsfiddle.net/nzwodyte/4/

CSS 被分配给[data-role=page]{ 元素并具有height: 100% 和position: relative 标签。

没有意识到 JQM 在我没有声明所述标签的情况下将 data-role="page" 分配给我的 HTML 中的元素。

因此，对于遇到相同问题的任何人，请检查页面的高度和位置 CSS（从调试的角度来看，而不是在原始 DOM 中）

【讨论】：