2012-04-02 83 views
9

我如何禁用jQuery移动中的垂直内容滚动? 我想禁用页面内容的所有滚动。 谢谢。jQuery手机禁用页面内容垂直滚动


我创建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> 
+0

你想停止滚动两个方向或只是垂直... event.preventDefault会帮助你防止滚动 – iDroid 2012-04-02 19:43:34

回答

13

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

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

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

这里是一个演示中,你可以尝试在移动设备上:http://jsfiddle.net/RKXLH/embedded/result/

+4

只是想让你知道在你的代码片段的最后有一个*讨厌的*隐形字符。我复制/粘贴它玩,它没有工作。只有经过15分钟的斗争才能看出这一点。 – 2013-09-09 06:58:52

+0

@JoãoCunha有趣的是,我什么也没看到。可能是页面字符集与您在编辑器应用程序中使用的字符集之间的区别。 – Jasper 2013-10-01 21:56:10

+0

可以确认,在Windows上的phpstorm中我也发生过。删除该行并手动重新输入以修复该行。 – 2017-11-01 12:38:52

14

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

“scrollstart”

事件,而不是和子元素仍然是滚动的。

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

在iOS6 webview上测试。

+1

上述方法有效。但如何恢复它?即如果在滚动停止之后,再次如果我们想要开始滚动,那么应该做什么? - 谢谢 – Mak 2013-02-14 12:17:53

+3

@Mak然后,您应该使用'.undelegate()':http://api.jquery.com/undelegate/删除委托事件处理程序。如果您使用'.on()',那么您可以使用'.off()'来移除事件处理程序。 '.live()'有'.die()',但是你应该在这个时候远离'.live()'。 – Jasper 2013-05-16 22:38:30

+0

@Jasper做了同样的事情......它的工作! – Mak 2013-05-17 11:25:58

6

以我的经验,你需要做的是这样的:

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); 
    }); 
} 

部件1和element2的可以是任何你想要的,当然点击功能仅仅是例子,你可以选择任何你想要的功能。

+0

它的作品......非常感谢你......上帝保佑你...... – 2014-11-27 07:43:15