我正在尝试使用Overthrow插件,它是用于移动设备上的溢出:自动的 polyfill。样品在这里。
我的问题:
如何检测div.element
可滚动的滚动启动/滚动停止?这是否可能,或者滚动/滚动启动/滚动停止事件仅适用于$(document)
?
具体来说,如果我的页面上有两个面板,它们都是可滚动的,有什么办法可以使这项工作:
$(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的 main 和 menu content 部分中的scrollstart 和popover-mode 的main content 部分。
最初我的选择器试图捕获这一点,并且只附加到相关的内容元素:
$(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
});
所以我现在有很多不必要的绑定,并且只在检测到事件后检查绑定是否正确,而另一种方式我只会将事件附加到所需的元素。
这就是我想知道的。