JQuery Mobile scrollview is like other pages / divs

Question

In the small application I'm working on, I have a list contained in a fixed div height that I would like to scroll through. Using jQuery Mobile scrollview I have a scroll listview just fine. The problem is that the scrollview's behavior seems to bleed from other divs.

I have some form elements on the second page, and the input / range slider no longer works, apparently due to scrollview (you can select a number with a tap, but it will not slide). All "pages" are in the same HTML file, that is, they are not external pages.

The list wrapper div looks like this. Nothing else has the data-scroll = "true" attribute other than this div.

<div id="scrollList" data-scroll="true"> 

I tied it in my head.

 <script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="assets/js/jquery.mobile.scrollview.js"></script> <script type="text/javascript" src="assets/js/scrollview.js"></script> 

When I check the code by inserting jQuery, I see that it adds class = "ui-scrollview-clip" and data-scroll = "y" to the content div on each page. See below.

 <div id="firstPageContent" class="ui-content ui-scrollview-clip" data-role="content" role="main" data-scroll="y" style="overflow: hidden; position: relative; height: 435px;"> 

Does anyone know how to make jQuery stop adding this to various divs or stop the scroll behavior on other pages? This seems to be happening in scrollview.js. Is this the wrong file?

Any help you can provide is greatly appreciated.

Thanks!

Answer 1

It doesn't look like the data-scroll = "true" attribute is being used for now. The scrollview mechanism applies to all pages (role = "page").

Here's how I got it to apply scrollview to a selected set of pages.

STEP 1:
In scrollview.js, I replaced this line:

 $( ":jqmData(role='page')" ).live( "pageshow", function(event) { 

with this line:

 $( ".scrollview" ).live( "pageshow", function(event) { 

STEP 2:
Then I added the attribute of the scrollview class for all the pages that I need to render the scrollview:

 <div id="layersPage" data-role="page" class="scrollview"> 

It seems that JQM is activating the data-scroll = "true" attribute when this product is officially accepted.

Answer 2

Have you tried adding data-role="none" to the element you want Jquery to remain intact? Read more about this data role here.