CODEWITHSUNDEEP
javascriptandroidiosjquery-mobilescroll
MaeSTRo
MaeSTRo

Reputation: 355

jQuery mobile disable page content vertical scroll

How I can disable vertical content scroll in jquery mobile? I want disable all scroll for page content. Thanks.

I create jquery.mobile page and in content I add jquery.mobile.scrollview. When I use scrollview my page content scroll top and bottom. How I can disable scroll content ? My page code:

<div id="page2" data-role="page" align="center">
    <div data-role="content">
        <div id="mydatacontent" class="form">
            <div class="data-table-shadow" data-scroll="y" class="square single-block-view-v" style="height: 750px;">
               <table id="datatable" class="data-table">
                   <tbody id="datatableContent">
                       <!-- Table Data Here -->
                   </tbody>
               </table>
           </div>
        </div>
    </div>
</div>

Upvotes: 9

Views: 33483

Answers (3)

ctrlmaniac
ctrlmaniac

Reputation: 444

In my experience you have to do this way:

var touchScroll = function( event ) {
    event.preventDefault();
};

$( 'element1').click(function() {
    //this will disable the scroll
    $( this).bind( 'touchmove', touchScroll );

    $( 'element2' ).click(function() {
        //this will enable scrolling
        $( document ).unbind( 'touchmove', touchScroll );
    });
}

element1 and element2 can be anything you want, and of course the click function is just for the example, you can choose any function you want.

Upvotes: 6

PetiPablo
PetiPablo

Reputation: 141

I found the answer above to be working well. However, this will prevent scrolling on child-elements of ".ui-content". I use the

"scrollstart"

event instead and child elements are still scrollable.

$(document).delegate(".ui-content", "scrollstart", false);

Tested on iOS6 webview.

Upvotes: 14

Jasper
Jasper

Reputation: 76003

You can bind to the touchmove event and return false to prevent the default behavior of the touchmove event:

$(document).delegate('.ui-content', 'touchmove', false);​

This should disable scrolling on all data-role="content" elements. You can update the .ui-content selector to be more specific if you only want this functionality on a/some page(s).

Here is a demo you can try on your mobile device: http://jsfiddle.net/RKXLH/embedded/result/

Upvotes: 13

Related Questions