【问题标题】:Disable overscroll in iOS Safari在 iOS Safari 中禁用过度滚动
【发布时间】:2012-09-20 07:57:17
【问题描述】:

如何防止 Safari iOS 中的过度滚动? 我会使用触摸手势在网站上导航,但我不能。

我试过了:

$(window).on('touchstart', function(event) {

    event.preventDefault();

});

但是通过这种方式我禁用了所有手势,事实上我无法通过捏合和捏合进行缩放。

有什么解决办法吗? 谢谢。

【问题讨论】:

    标签: javascript jquery iphone touch mobile-safari


    【解决方案1】:

    应该是完成此任务的最简单方法:

    $(function() {
        document.addEventListener("touchmove", function(e){ e.preventDefault(); }, false);
    });
    

    希望这会有所帮助。

    最好的。

    【讨论】:

    • 完美运行,保留了 div 的滚动和最少的代码!
    • 我做了……只能做一次!!
    • @NeedHelp,这也阻止了我的可滚动 div。你有没有做一些额外的事情来保持它们可滚动?
    • @Yves Van Broekhoven...我使用了这个自定义滚动条manos.malihu.gr/jquery-custom-content-scroller,但即使没有它,我仍然可以获得可滚动的 div...
    • @Yves Van Broekhoven...查看130.95.21.121/museum/search.php 并选择系统复选框,然后在相关菜单中选择消化系统和全部。搜索结果将填充 LH div 并且它是可滚动的。由于上面 Todd 的代码,页面无法移动。
    【解决方案2】:

    这种方式将允许可滚动元素,同时仍防止浏览器本身过度滚动。

    //uses document because document will be topmost level in bubbling
    $(document).on('touchmove',function(e){
      e.preventDefault();
    });
    //uses body because jquery on events are called off of the element they are
    //added to, so bubbling would not work if we used document instead.
    $('body').on('touchstart','.scrollable',function(e) {
      if (e.currentTarget.scrollTop === 0) {
        e.currentTarget.scrollTop = 1;
      } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
        e.currentTarget.scrollTop -= 1;
      }
    });
    //prevents preventDefault from being called on document if it sees a scrollable div
    $('body').on('touchmove','.scrollable',function(e) {
      e.stopPropagation();
    });
    

    【讨论】:

    • 很好的解决方案!为我工作。请记住将“可滚动”类放在要滚动的所有 div 上。
    • 这也适用于我。感谢您从地狱中拯救了我的生命!
    猜你喜欢
    • 1970-01-01
    • 2014-07-14
    • 1970-01-01
    • 2018-04-23
    • 2019-10-31
    • 2014-07-30
    • 2021-07-01
    • 1970-01-01
    • 2020-06-24
    相关资源
    最近更新 更多