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

【问题标题】：jQuery mobile disable page content vertical scrolljQuery mobile 禁用页面内容垂直滚动
【发布时间】：2012-04-02 19:28:17
【问题描述】：

如何在 jquery mobile 中禁用垂直内容滚动？我想禁用页面内容的所有滚动。谢谢。

我创建 jquery.mobile 页面并在内容中添加 jquery.mobile.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>

【问题讨论】：

您想停止双向滚动或仅垂直滚动... event.preventDefault 将帮助您防止滚动

标签： javascript android ios jquery-mobile scroll

【解决方案1】：

我发现上面的答案运行良好。但是，这将阻止滚动“.ui-content”的子元素。我用

“滚动开始”

事件和子元素仍然可以滚动。

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

在 iOS6 网络视图上测试。

【讨论】：

上述方法有效。但是怎么恢复呢？？即如果在停止滚动之后，如果我们想再次开始滚动，那么应该怎么做？ - 谢谢
@Mak 然后您应该使用.undelegate(): api.jquery.com/undelegate 删除委托的事件处理程序。如果您使用.on()，那么您可以使用.off() 删除事件处理程序。 .live() 有 .die()，但此时您应该远离 .live()。

【解决方案2】：

您可以绑定到touchmove 事件和return false 以防止touchmove 事件的默认行为：

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

这应该禁用所有data-role="content" 元素的滚动。如果您只想在某个/某些页面上使用此功能，则可以将 .ui-content 选择器更新为更具体。

这是一个您可以在移动设备上试用的演示：http://jsfiddle.net/RKXLH/embedded/result/

【讨论】：

只是想让你知道在你的 sn-p 的最后有一个 nasty 隐形字符。我复制/粘贴它来玩，但它不起作用。经过 15 分钟的挣扎后才发现这一点。
@JoãoCunha 有趣，我什么也没看到。可能是页面字符集与您在编辑器应用程序中使用的字符集不同。
可以确认，在Windows上的phpstorm中也发生在我身上。删除该行并重新手动修复它。

【解决方案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可以任意，当然点击功能只是举例，可以任意选择。

【讨论】：