防止网页“过度滚动”

在Mac专用的Chrome浏览器中，可以使页面“滚动”（由于缺少更好的用词），如下面的屏幕截图所示，以查看“后面是什么”，类似于iPad或iPhone。

我注意到有些页面已将其禁用，例如gmail和“新标签”页面。

如何禁用“过度滚动”？还有其他方法可以控制“过度滚动”吗？

公认的解决方案对我不起作用。我仍然可以滚动的同时让它工作的唯一方法是：

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

body {
    height: 100%;
    overflow: auto;
}

在Chrome 63 +，Firefox 59+和Opera 50+中，您可以在CSS中执行以下操作：

body {
  overscroll-behavior-y: none;
}

这将禁用问题截图中所示的iOS上的橡皮筋效果。但是，它也禁用“拉动刷新”，“发光”效果和滚动链接。

但是，您可以选择在过度滚动时实现自己的效果或功能。例如，如果您想模糊页面并添加整洁的动画：

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%; 
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

浏览器支持

在撰写本文时，Chrome 63 +，Firefox 59+和Opera 50+支持它。Edge公开支持它，而Safari未知。在MDN文档中跟踪此处的进度和当前浏览器兼容性

更多信息

• Chrome 63发布视频
• Chrome 63发布帖子 -包含我上面写的所有内容的链接和详细信息。
• overscroll-behavior CSS规范
• MDN文档

一种防止这种情况的方法是使用以下CSS：

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

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

这样，主体在滚动页面的顶部和底部时不会溢出，也不会“反弹”。容器将在其中完美滚动其内容。这适用于Safari和Chrome。

编辑

为什么使用额外的<div>元素作为包装器可能有用：
Florian Feldhaus的解决方案使用的代码略少，并且效果很好。但是，当内容超出视口宽度时，可能会有一点古怪之处。在这种情况下，窗口底部的滚动条将从视口移出一半，并且很难识别/到达。body { margin: 0; }如果合适，可以避免使用。在无法添加此CSS的情况下，包装元素很有用，因为滚动条始终是完全可见的。

在下面找到屏幕截图：

您可以使用以下代码删除touchmove预定义的操作：

document.body.addEventListener('touchmove', function(event) {
  console.log(event.source);
  //if (event.source == document.body)
    event.preventDefault();
}, false);

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

试试这个

body {
    height: 100vh;
    background-size: cover;
    overflow: hidden;
}

position: absolute为我工作。我已经在Chrome 50.0.2661.75 (64-bit)OSX和OSX 上进行了测试。

body {
  overflow: hidden;
}

// position is important
#element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

除非网页高度等于window.innerHeight，否则无法禁用弹跳效果，您可以让子元素滚动。

html {
    overflow: hidden;
}