Google Chrome 滚动捕捉过度滚动错误

Question

在我看来，这是一个非常基本的滚动捕捉设置，但它允许在 Google Chrome（桌面）中无限滚动：

在上面你可以看到，从页面顶部，你仍然可以进一步向上滚动。同样，您仍然可以从页面底部进一步向下滚动。

（在 MacOS 上的 Google Chrome 131.0.6778.86 中观察到的错误）

简化代码：

HTML：

<html>
  <body>
    <div class="a"></div>
    <div class="b"></div>
  </body>
</html>

CSS：

  html {
    scroll-snap-type: y mandatory;
  }

  .a {
    scroll-snap-align: start;
    height: 100vh;
  }

  .b {
    scroll-snap-align: start;
    height: 33.3vh;
  }

我尝试了多种方法，但未能找到一种不会无意中消除滚动捕捉的修复方法。我希望你们中的一位向导有一些晦涩的 CSS 属性，迫使 Google Chrome 尊重文档的滚动边界。

Answer 1

将

overflow-y: scroll

添加到

html

和

body

元素，并将

height: 100%

设置在主体上。这种组合创建了一个尊重文档边界的适当的滚动容器。这是增强的 CSS：

样式.css

html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

body {
    height: 100%;
    margin: 0;
    overflow-y: scroll;
}

.a {
    scroll-snap-align: start;
    height: 100vh;
}

.b {
    scroll-snap-align: start;
    height: 33.3vh;
}

此方法的工作原理是显式定义可滚动区域并确保浏览器具有清晰的滚动容器边界。 body 元素上的

height: 100%

确保正确的内容包含，而 html 和 body 元素上的

overflow-y: scroll

创建一个定义明确的滚动上下文，防止您遇到过度滚动行为。

Google Chrome 滚动捕捉过度滚动错误

问题描述投票：0回答：1

1个回答

最新问题

Google Chrome 滚动捕捉过度滚动错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1