时间戳

首页 > 解决方案 > 自 Chrome 81 更新以来，CSS 滚动捕捉表现得很奇怪

css - 自 Chrome 81 更新以来，CSS 滚动捕捉表现得很奇怪

问题描述

我一直在开发一个带有屏幕填充“幻灯片”的单页网站，如果可能的话，我真的很想使用滚动捕捉。几天前我让它运行得很好，但是自从 Chrome 更新以来，整个事情都被打破了：当使用滚轮时，它不是平滑地捕捉到一张幻灯片，而是一次快速地跳过两张幻灯片。

起初我认为这是因为我也在使用 jQuery/JS 来控制一些滚动事件，但我只是注意到启发我采用这种方法的原始笔有完全相同的问题。事实上，当完全关闭 JS 甚至将代码剥离到最基本的部分时，它仍然无法正常工作。

原笔： https ://codepen.io/team/css-tricks/pen/yLLqqgP

编码：

html, body {
  scroll-snap-type: mandatory; /* for older browsers */
  scroll-snap-points-y: repeat(100vh); /* for older browsers */
  scroll-snap-type: y mandatory;
}
.scrollsnap-section {
  height: 100vh;
  scroll-snap-align: start;
  position: relative;
}

// 

<body>
<section id="slide-1" class="scrollsnap-section">
  <h2>slide 1</h2>
</section>
<section id="slide-2" class="scrollsnap-section">
  <h2>slide 2</h2>
</section>
</body>

有人知道这里发生了什么吗？它适用于所有其他现代浏览器，并且曾经在 Chrome 中运行，直到更新到版本 81。

标签： cssscrollscroll-snapscroll-snap-type

解决方案

推荐阅读