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>
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.
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With