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函数只是用于示例,你可以选择你想要的任何函数.