防止网页“过度滚动”

Question

在Chrome for Mac中，可以“过度滚动”一个页面（缺少一个更好的词），如下面的屏幕截图所示，看看“背后有什么”，类似于iPad或iPhone。

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

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

Answer 1

接受的解决方案对我不起作用。我仍然能够滚动的唯一方法是：

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

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

Answer 2

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

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

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

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

修改

为什么额外的<div> - 元素作为包装器会很有用：
Florian Feldhaus' solution使用的代码稍微少一些，也可以正常工作。但是，当涉及超出视口宽度的内容时，它可能会有一点怪癖。在这种情况下，窗口底部的滚动条会从视口移出一半，很难识别/到达。如果合适，可以使用body { margin: 0; }来避免这种情况。在无法添加此CSS的情况下，包装器元素非常有用，因为滚动条始终完全可见。

查找下面的截图：

Answer 3

在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+都支持它。边缘公开支持它，而Safari是未知的。在here

跟踪进度MDN documentation和当前浏览器兼容性

更多信息

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

Answer 4

试试这种方式

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

Answer 5

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

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

Answer 6

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

Answer 7

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;
}

Answer 8

除非网页的高度等于file = importdata('transform_c.txt'); fileData = file.data; image = imread('mecca06.pgm'); [row, col] = size(image); scalingMatrix = zeros(3,3); scalingMatrix(1,1) = fileData(2); scalingMatrix(1,2) = fileData(3); scalingMatrix(1,3) = fileData(4); scalingMatrix(2,1) = fileData(5); scalingMatrix(2,2) = fileData(6); scalingMatrix(2,3) = fileData(7); scalingMatrix(3,1) = fileData(8); scalingMatrix(3,2) = fileData(9); scalingMatrix(3,3) = fileData(10); m1Inverse = inv(scalingMatrix); outputImage = applyTransformation(image, row, col, m1Inverse); figure imshow(outputImage); function outImage = applyTransformation(image, row, col, m1Inverse) points = zeros(3,1); for i=1:row for j=1:col points(1,1) = i; points(2,1) = j; points(3,1) = 1; m2 = m1Inverse * points; x = m2(1,1); y = m2(2,1); xlb = floor(x); ylb = floor(y); if(xlb <= 0) xlb = 1; end if(xlb > row) xlb = row; end if(ylb <= 0) ylb = 1; end if(ylb > col) ylb = col; end xub = xlb+1; yub = ylb+1; if(xub <= 0) xub = 1; end if(xub > row) xub = row; end if(yub <= 0) yub = 1; end if(yub > col) yub = col; end exub = xub-x; eyub = yub-y; exlb = x-xlb; eylb = y-ylb; outImage(i,j) = (exub*eyub*image(xlb,ylb))+(exlb*eyub*image(xub,ylb))+(exub*eylb*image(xlb,yub))+(exlb*eylb*image(xub,yub)); end end end ，否则无法禁用跳出效果，您可以让子元素滚动。

window.innerHeight