Jquery mobileで垂直コンテンツスクロールを無効にするにはどうすればよいですか?ページコンテンツのすべてのスクロールを無効にしたい。ありがとう。
Jquery.mobileページを作成し、コンテンツにjquery.mobile.scrollviewを追加します。 scrollviewを使用すると、ページコンテンツが上下にスクロールします。スクロールコンテンツを無効にするにはどうすればよいですか?私のページコード:
<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>
上記の答えはうまく機能していることがわかりました。ただし、これにより、「。ui-content」の子要素をスクロールできなくなります。私は
"scrollstart"
代わりにイベントを実行し、子要素は引き続きスクロール可能です。
$(document).delegate(".ui-content", "scrollstart", false);
IOS6Webビューでテスト済み。
touchmove
イベントとreturn false
にバインドして、touchmove
イベントのデフォルトの動作を防ぐことができます。
$(document).delegate('.ui-content', 'touchmove', false);
これにより、すべてのdata-role="content"
要素のスクロールが無効になります。一部のページでのみこの機能が必要な場合は、.ui-content
セレクターをより具体的に更新できます。
これがあなたのモバイルデバイスで試すことができるデモです: http://jsfiddle.net/RKXLH/embedded/result/
私の経験では、次のようにする必要があります。
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とelement2は任意の関数にすることができます。もちろん、クリック関数は単なる例であり、任意の関数を選択できます。