is it possible to capture scrollstart on an element other than $(document) in Jquery/Javascript?
Question by frequent
I’m trying to use the Overthrow Plugin, which is a polyfill for overflow:auto on mobile devices. Sample here.
My question:
How can I detect scrollstart/scrollstop on a div.element that is scrollable? Is this possible at all, or do the scroll/scrollstart/scrollstop events only work on $(document)?
Specifically, if I have two panels on my page, which both are scrollable, is there any way to make this work:
$(document).on('scrollstart','div:jqmData(panel="main"), div:jqmData(panel="menu")'), function() {
console.log("scroll detected");
});
Thanks for some inputs!
EDIT:
My HTML looks like this:
<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>
Screen Mode is set depending on screen size. In every panel there can be multiple pages, which each have a content section, which is scrollable using overthrow.
I want to bind to scrollstart in main and menu content section in splitview-mode AND main content sections in popover-mode.
Originally my selector tried to capture this and only attach to the relevant content elements:
$(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
});
Agreed this is complex and did not work. But it attached events only to the necessary elements. Now I’m doing like this:
$('.ui-content').on('scrollstart', function() {
// check here if .ui-content is on the correct panel
});
So I now have a lot of unnecessary bindings and only check if the binding is correct after the event is detected vs. the other way I would only attach the event to the required elements.
That’s what I was wondering.
Answer by Starx
You can directly select the element and attach the scroll event. Simple example
$("#selector").on('scrollstart', function() {
//...do stuff
});
