ipad safari:禁用滚动和弹跳效果？

Question

我正在开发一个基于浏览器的应用程序,目前我正在为ipad safari浏览器开发和设计样式.

我在ipad上寻找两件事:如何禁用不需要它的页面的垂直滚动？如何禁用弹性反弹效果？

Answer 1

此答案不再适用,除非您正在开发一个非常旧的iOS设备...请参阅其他解决方案

2011答案:对于在iOS Safari中运行的web/html应用程序,你需要类似的东西

document.ontouchmove = function(event){
    event.preventDefault();
}

对于iOS 5,您可能需要考虑以下因素:document.ontouchmove和在iOS 5上滚动

2014年9月更新:可以在此处找到更全面的方法:https://github.com/luster-io/prevent-overscroll.为此以及大量有用的webapp建议,请参阅http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

2016年3月更新:最后一个链接不再有效 - 请参阅https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist .html代替归档版本.谢谢@falsarella指出这一点.

Answer 2

您还可以将body/html的位置更改为fixed:

body,
html {
  position: fixed;
}

Answer 3

要防止在现代移动浏览器上滚动,您需要添加被动:false.在找到这个解决方案之前,我一直在拉我的头发.我只在互联网上的另一个地方发现了这一点.

function preventDefault(e){
    e.preventDefault();
}

function disableScroll(){
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
    document.body.removeEventListener('touchmove', preventDefault);
}

Answer 4

iOS 16 现在支持CSS。overscroll-behavior如果您的目标是 > iOS 16 设备，为了防止弹性弹跳效果，请将以下 CSS 添加到 html 根目录

html {
  overscroll-behavior: none;
}

请注意，提供的解决方案仅在内容大于视口时禁用弹性反弹效果。

如果您还想完全禁用 iOS 设备上主页的滚动，请使用

html body {
   overflow: hidden;
}

Answer 5

您可以使用此jQuery代码段执行此操作:

$(document).bind(
      'touchmove',
          function(e) {
            e.preventDefault();
          }
);

这将阻止垂直滚动以及页面上发生的任何反弹效果.

Answer 6

overflow: scroll;
-webkit-overflow-scrolling: touch;

在容器上，您可以在元素内部设置反弹效果

资料来源：http：//www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/