在移动 Safari 上禁用滚动和弹跳效果

Question

我正在开发一个基于浏览器的应用程序，目前我正在为 iPad 的移动 Safari 浏览器开发和设计样式。

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

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 -过度滚动。有关此内容以及大量有用的 Web 应用程序建议，请参阅 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 的位置更改为固定：

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/

Answer 7

我知道这有点偏离滑雪道，但我一直在使用 Swiffy 将 Flash 转换为交互式 HTML5 游戏，并遇到了相同的滚动问题，但没有找到有效的解决方案。

我遇到的问题是 Swiffy 阶段占据了整个屏幕，因此一旦加载，文档 touchmove 事件就永远不会被触发。

如果我尝试将相同的事件添加到 Swiffy 容器中，它会在舞台加载后立即被替换。

最后，我通过将 touchmove 事件应用于舞台内的每个 DIV 来解决它（相当混乱）。由于这些 div 也在不断变化，我需要不断检查它们。

这是我的解决方案，看起来效果很好。我希望这对尝试找到与我相同的解决方案的其他人有所帮助。

var divInterval = setInterval(updateDivs,50);
function updateDivs(){
$("#swiffycontainer > div").bind(
    'touchmove',
     function(e) {
        e.preventDefault();
    }
);}

Answer 8

删除ipad safari的代码：禁用滚动和弹跳效果

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

如果文档中有canvas标签，有时会影响Canvas内对象的可用性（例如：对象的移动）；所以添加下面的代码来修复它。

    document.getElementById("canvasId").addEventListener("touchmove", function (e) {
        e.stopPropagation();
    }, { passive: false });

Answer 9

这些解决方案都不适合我。我就是这样做的。

  html,body {
      position: fixed;
      overflow: hidden;
    }
  .the_element_that_you_want_to_have_scrolling{
      -webkit-overflow-scrolling: touch;
  }

Answer 10

尝试这个 JS 解决方案：

var xStart, yStart = 0; 

document.addEventListener('touchstart', function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
}); 

document.addEventListener('touchmove', function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

防止默认的 Safari 滚动和弹跳手势，而不分离触摸事件侦听器。

Answer 11

改进的答案@Ben Bos和@Tim评论

此CSS将有助于防止CSS重新渲染的滚动和性能问题，因为位置改变/没有宽度和高度的小滞后

html,
body {
  position: fixed;
  width: 100%; 
  height: 100%
}

Answer 12

这个 CSS 解决方案对我有用（仅限 iOS，我发现它最烦人）：

@supports (-webkit-touch-callout: none) {
    html {
        overscroll-behavior-y: none;
    }
}

Answer 13

对于那些使用 MyScript Web 应用程序并且正在努力解决正文滚动/拖动问题（在 iPad 和平板电脑上）而不是实际编写的人：

已修复对我来说。

Answer 14

在 iPhone 上测试。只需在目标元素容器上使用此 css，它就会改变滚动行为，当手指离开屏幕时滚动行为会停止。

-webkit-overflow-scrolling: auto

https://developer.mozilla.org/en -US/docs/Web/CSS/-webkit-overflow-scrolling

Answer 15

您可以使用 js 来防止滚动：

let body = document.body;

let hideScroll = function(e) {
  e.preventDefault();
};

function toggleScroll (bool) {

  if (bool === true) {
    body.addEventListener("touchmove", hideScroll);
  } else {
    body.removeEventListener("touchmove", hideScroll);
  }
}

而不仅仅是在打开/关闭模式时运行/停止 toggleScroll 函数。

像这样 toggleScroll(true) /toggleScroll(false)

（这仅适用于 iOS，在 Android 上不起作用）

Answer 16

尝试这个切换 webkitOverflowScrolling 样式的 JS 解决方案。这里的技巧是，这种风格关闭后，移动版 Safari 会转为普通滚动并防止过度弹跳——可惜的是，它无法取消正在进行的拖动。这个复杂的解决方案还跟踪 onscroll，因为顶部的弹跳会使 scrollTop 为可跟踪的负值。该解决方案在 iOS 12.1.1 上进行了测试，有一个缺点：在加速滚动时，由于重置样式可能不会立即取消它，仍然会发生单次过度弹跳。

function preventScrollVerticalBounceEffect(container) {
  setTouchScroll(true) //!: enable before the first scroll attempt

  container.addEventListener("touchstart", onTouchStart)
  container.addEventListener("touchmove", onTouch, { passive: false })
  container.addEventListener("touchend", onTouchEnd)
  container.addEventListener("scroll", onScroll)

  function isTouchScroll() {
    return !!container.style.webkitOverflowScrolling
  }

  let prevScrollTop = 0, prevTouchY, opid = 0

  function setTouchScroll(on) {
    container.style.webkitOverflowScrolling = on ? "touch" : null

    //Hint: auto-enabling after a small pause makes the start
    // smoothly accelerated as required. After the pause the
    // scroll position is settled, and there is no delta to
    // make over-bounce by dragging the finger. But still,
    // accelerated content makes short single over-bounce
    // as acceleration may not be off instantly.

    const xopid = ++opid
    !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250)

    if(!on && container.scrollTop < 16)
      container.scrollTop = 0
    prevScrollTop = container.scrollTop
  }

  function isBounceOverTop() {
    const dY = container.scrollTop - prevScrollTop
    return dY < 0 && container.scrollTop < 16
  }

  function isBounceOverBottom(touchY) {
    const dY = touchY - prevTouchY

    //Hint: trying to bounce over the bottom, the finger moves
    // up the screen, thus Y becomes smaller. We prevent this.

    return dY < 0 && container.scrollHeight - 16 <=
      container.scrollTop + container.offsetHeight
  }

  function onTouchStart(e) {
    prevTouchY = e.touches[0].pageY
  }

  function onTouch(e) {
    const touchY = e.touches[0].pageY

    if(isBounceOverBottom(touchY)) {
      if(isTouchScroll())
        setTouchScroll(false)
      e.preventDefault()
    }

    prevTouchY = touchY
  }

  function onTouchEnd() {
    prevTouchY = undefined
  }

  function onScroll() {
    if(isTouchScroll() && isBounceOverTop()) {
      setTouchScroll(false)
    }
  }
}

Answer 17

考虑以下架构：

<body> <div id="root"></div> </body>

这个 css 可以工作：

#root { position: fixed; height: 100%; overflow: auto; }

Answer 18

body {
   touch-action:none;
}

使用 JQuery

// Disable
$("body").css({ "touch-action": "none" })

// Enable
$("body").css({ "touch-action": "auto" })

Answer 19

对于那些不想摆脱弹跳而只是想知道弹跳何时停止的人（例如开始计算屏幕距离），您可以执行以下操作（容器是溢出的容器元素）：

    const isBouncing = this.container.scrollTop < 0 ||
    this.container.scrollTop + this.container.offsetHeight >
        this.container.scrollHeight

Answer 20

禁用 safari 弹跳滚动效果：

html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
  position: fixed;
}  

Answer 21

当带有滚动的菜单打开并且位于滚动高度的顶部或底部时，我在抓取后台的 html 元素时遇到了问题。我尝试了很多事情。将 html 位置设置为 fixed 是我最接近锁定屏幕的方法，但在 PWA 中，它导致底部出现白色区域，我无法修复。
最后我找到了一个对我有用的解决方案

Answer 22

这就是我解决它的方法：

let touchMoveBool = false;
function handleTouchMoveEvent(e) {
    if (touchMoveBool) {
        console.log('preventing touchmove');
        e.preventDefault(); // prevent the default scrolling behaviour including pull down to refresh
    } else {
        console.log('NOT preventing touchmove');
    }
}
    
// Grab the html for an iOS device else grab the body of an android.
if (navigator.platform.match(/iPad|iPhone|iPod/)) {
    document.documentElement.addEventListener('touchmove', handleTouchMoveEvent, { passive: false });
} else {
    document.body.addEventListener('touchmove', handleTouchMoveEvent, { passive: false });
}

然后你只需在你想要/不想要能够滚动或具有滚动行为的代码部分中切换布尔值

Answer 23

与愤怒的猕猴桃类似，我使用高度而不是位置来让它工作：

html,body {
  height: 100%;
  overflow: hidden;
}

.the_element_that_you_want_to_have_scrolling{
  -webkit-overflow-scrolling: touch;
}

Answer 24

解决方案经过测试，适用于 iOS 12.x

这是我遇到的问题：

<body> <!-- the whole body can be scroll vertically -->
  <article>

    <my_gallery> <!-- some picture gallery, can be scroll horizontally -->
    </my_gallery>

  </article>
</body>

当我滚动图库时，主体总是自行滚动（人类滑动并不是真正水平的），这使得我的图库毫无用处。

这是我在画廊开始滚动时所做的事情

var html=jQuery('html');
html.css('overflow-y', 'hidden');
//above code works on mobile Chrome/Edge/Firefox
document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari

以及当我的画廊结束滚动时所做的事情...

var html=jQuery('html');
html.css('overflow-y', 'scroll');
document.ontouchmove=function(e){return true;}

希望这会有所帮助〜