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可以是你想要的任何东西，当然点击功能仅用于示例，你可以选择你想要的任何功能。

jQuery mobile禁用页面内容垂直滚动

3 个答案: