CODEWITHSUNDEEP
jqueryjquery-mobilescrollview
user1086370
user1086370

Reputation: 41

jQuery Mobile scrollview behaviors bleeding over to other pages/divs

In a little app I'm working on I have a listview contained in a fixed height div that I'd like to be scrollable. Using jQuery Mobile scrollview I have the listview scrolling just fine. The problem is the scrollview behavior appears to be bleeding over to other divs.

I have some form elements on the second page, and the input/range slider no longer works, apparently because of the scrollview (you can select a number with a tap but it won't slide). All "pages" are in a single HTML file, i.e. they are not external pages.

The div wrapping the listview is as below. Nothing else has a data-scroll="true" attribute other than this div.

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

I've linked the above in the 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 inspect the code jQuery is inserting I see it's adding class="ui-scrollview-clip" and data-scroll="y" to the content div in every 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 anybody know how to get jQuery to stop appending this to various divs or to stop the scroll behavior bleeding over to other pages? It appears it happens in scrollview.js. Is this the wrong file to use?

Any help you can provide is greatly appreciated.

Thanks!

Upvotes: 4

Views: 1677

Answers (2)

Randy Findley
Randy Findley

Reputation: 329

It doesn't look like the data-scroll="true" attribute is being used yet. The scrollview engine is applied to all (role="page") pages.

Here is how I got it to apply scrollview to a select set of pages.

STEP 1:
Within scrollview.js I replaced this line:

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

with this line:

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


STEP 2:
I then added the 'scrollview' class attribute to all pages that I wanted scrollview to render:

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

It sounds like JQM will enable the data-scroll="true" attribute when this product is officially accepted.

Upvotes: 1

Mike K.
Mike K.

Reputation: 3789

Have you tried adding data-role="none" to element you want Jquery to leave untouched? More on this data-role here.

Upvotes: 0

Related Questions