jQuery mobile禁用頁面內容垂直滾動

Question

如何在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>

Answer 1

我發現上面的答案運作良好。 但是，這將阻止滾動“.ui-content”的子元素。 我用

“scrollstart”

事件而不是子元素仍然是可滾動的。

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

在iOS6 webview上測試。

Answer 2

您可以綁定到touchmove事件並return false以防止touchmove事件的默認行為：

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

這應該禁用所有data-role="content"元素的滾動。 如果您只想在/某些頁面上使用此功能，則可以更新.ui-content選擇器以使其更具體。

您可以在移動設備上試用以下演示： http ： //jsfiddle.net/RKXLH/embedded/result/

Answer 3

根據我的經驗，你必須這樣做：

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可以是你想要的任何東西，當然click函數只是用於示例，你可以選擇你想要的任何函數。