Question

我正在尝试使用Overthrow插件，这是一个用于溢出的polyfill：auto在移动设备上。样本here。

我的问题：
如何检测可滚动的div.element上的scrollstart / scrollstop？这是否可行，或者scroll / scrollstart / scrollstop事件是否仅适用于$（文档）？

具体来说，如果我的页面上有两个面板，它们都是可滚动的，有没有办法让这个工作：

 $(document).on('scrollstart','div:jqmData(panel="main"), div:jqmData(panel="menu")'), function() {
    console.log("scroll detected");
    });

感谢您提供一些意见！

修改
我的HTML看起来像这样：

<html class="ui-popover-mode">
// OR depending on screen size
<html class="ui-splitview-mode">
   // panel 1
   <div data-panel="main" class="ui-panel">
       <div data-role="page" class="ui-page" id="mainOne">
           <div data-role="content" class="ui-content"></div>
       </div>
       <div data-role="page" class="ui-page" id="mainTwo">
           <div data-role="content" class="ui-content"></div>
       </div>
   </div>
   // panel 2
   <div data-panel="menu" class="ui-panel">
       <div data-role="page" class="ui-page" id="menuOne">
           <div data-role="content" class="ui-content"></div>
       </div>
       <div data-role="page" class="ui-page" id="menuTwo">
           <div data-role="content" class="ui-content"></div>
       </div>
   </div>
   // panel 3
   <div data-panel="pop" class="ui-panel">
       <div data-role="page" class="ui-page" id="popOne">
           <div data-role="content" class="ui-content"></div>
       </div>
       <div data-role="page" class="ui-page" id="popTwo">
           <div data-role="content" class="ui-content"></div>
       </div>
   </div>
</html>

根据屏幕尺寸设置屏幕模式。在每个面板中都可以有多个页面，每个页面都有一个内容部分，可以使用推翻滚动。

我想绑定到 splitview-mode 的主要内容和菜单内容部分中的 scrollstart 以及 popover-mode 中的主要内容部分。

最初我的选择器尝试捕获此内容并仅附加到相关的内容元素：

$(document).on('scrollstart','.ui-splitview-mode div:jqmData(panel="main") .ui-content,  .ui-splitview-mode div:jqmData(panel="menu") .ui-content, .ui-popover-mode div:jqmData(panel="main") .ui-content, ', function() {
        // do sth
    });

同意这很复杂但不起作用。但它只将事件附加到必要的元素上。现在我这样做：

$('.ui-content').on('scrollstart', function() {
        // check here if .ui-content is on the correct panel
    });

所以我现在有很多不必要的绑定，只检查在检测到事件后绑定是否正确，而另一种方法是我只将事件附加到所需的元素。

这就是我想知道的。

Answer 1

您可以直接选择元素并附加滚动事件。简单的例子

$("#selector").on('scrollstart', function() {
    //...do stuff
});

是否有可能在Jquery / Javascript中捕获$（document）以外的元素上的scrollstart？

1 个答案: