April 15, 2012

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!

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 data-role="page" class="ui-page" id="mainTwo">
           <div data-role="content" class="ui-content"></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 data-role="page" class="ui-page" id="menuTwo">
           <div data-role="content" class="ui-content"></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 data-role="page" class="ui-page" id="popTwo">
           <div data-role="content" class="ui-content"></div>

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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+


Please fill the form - I will response as fast as I can!