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

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 documentation上跟踪进度here和当前浏览器兼容性

更多信息

• Chrome 63 release video的
• Chrome 63 release post-包含我上面写的所有内容的链接和细节。
• overscroll-behavior CSS spec的
• MDN documentation的

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

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

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

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

编辑

• 为什么额外的<div>-元素作为 Package 器可能很有用：*

Florian Feldhaus' solution使用的代码稍少，工作也很好。但是，它可能有一点怪癖，当涉及到超过视口宽度的内容时。在这种情况下，窗口底部的滚动条被移出视口一半，很难识别/reach。如果合适的话，可以使用body { margin: 0; }来避免。在无法添加此CSS的情况下， Package 器元素非常有用，因为滚动条始终完全可见。
在下面查找屏幕截图：x1c 0d1x

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

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

字符串

试试这样

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

字符串

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

字符串

position: absolute适合我。我已经在Chrome 50.0.2661.75 (64-bit)和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;
}

字符串