防止网页“过度滚动”

Posted 2023-03-05

【中文标题】防止网页“过度滚动”

【英文标题】：Prevent "overscrolling" of web page

【发布时间】：2012-08-16 07:03:34

【问题描述】：

在 Mac 版 Chrome 中，可以“过度滚动”页面（因为没有更好的词），如下面的屏幕截图所示，以查看“后面是什么”，类似于 iPad 或 iPhone。

我注意到某些页面已禁用它，例如 gmail 和“​​新标签”页面。

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

【问题讨论】：

例如，我实际上是在尝试在新标签页上启用它。试图了解这里涉及的问题。

我认为没有办法做到这一点。让页面足够长以允许滚动条启动是一件简单的事情。另外，请考虑将帖子的标题更改为您想要实现的目标，而不是相反。

【参考方案1】：

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

html 
    overflow: hidden;
    height: 100%;


body 
    height: 100%;
    overflow: auto;

【讨论】：

这个解决方案对于不遵守html 样式黑客的设备和移动网络浏览器都是有问题的设置。

此解决方案从 Chrome 46 for Mac 开始不起作用。它可以防止过度滚动，但没有一个子元素是可滚动的。

那么，如何获得通常使用$(window).scrollTop 获得的scrollTop 值？

这两种解决方案都不适用于 Mac 版 Chrome 49 或 Firefox 44 版。 window.scrollY 始终是 0。

适用于 Chrome，但不适用于 Safari。

【参考方案2】：

在 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 则是未知数。跟踪here 的进度和MDN documentation 的当前浏览器兼容性

更多信息

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

【讨论】：

在我看来，这是最好的解决方案。而且很简单。拥有所有赞成票的人可能会出现问题。

边缘浏览器用户还有其他解决方案吗？

@YTG 自版本 79 转换为在底层使用 Chromium 以来，此属性在 Edge 中也没有错误。该属性在之前的版本 18 中也有一些工作，但是通过一个错误。或者，不使用 overscroll-behaviour-y 属性的其他解决方案应该在 Edge 的早期版本中工作。然而，18，尤其是 79+ 似乎覆盖了大多数 Edge 用户。在此处查看有关浏览器支持的更多信息：caniuse.com/css-overscroll-behavior。在 Edge 支持方面，MDN 链接目前似乎有点过时了。

【参考方案3】：

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

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


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

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

编辑

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

在下面找到截图：

【讨论】：

如果这一次有效，它不再有效。在我的 Chrome v37 中，overscoll 行为将发生在元素滚动的任何地方。

@user1585345 我现在已经在 OS X 上的 Chrome 38 中再次测试了它，它仍然有效（也在 Safari 中）。这是我正在使用的文件。你能用这个文件测试它吗？ Direct link to the file on sendspace.com.

我用上面的文件测试过，还是有弹跳的。我怀疑我们不会弄清这个谜团的真相。铬 37

你不应该需要额外的包装 div。检查以下答案以获得更好的解决方案。

此解决方案从 Chrome 46 for Mac 开始不起作用。它可以防止过度滚动，但没有一个子元素是可滚动的。

【参考方案4】：

试试这个方法

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

【参考方案5】：

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

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

【参考方案6】：

html,body 
    width: 100%;
    height: 100%;

body 
    position: fixed;
    overflow: hidden;

【讨论】：

虽然这可能会回答这个问题，但最好解释一下答案的基本部分，以及 OPs 代码可能存在什么问题。

您的答案因其长度和内容而被标记。我建议修改。也许添加更多细节。

position: fixed 是救世主！

【参考方案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;

【参考方案8】：

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

html 
    overflow: hidden;