时间戳

首页 > 解决方案 > 我怎样才能让 Chrome 尊重“scroll-snap-stop：always”？

html - 我怎样才能让 Chrome 尊重“scroll-snap-stop：always”？

问题描述

我有一个使用全屏 CSS 滚动捕捉的页面。以下是该页面的最小复制：

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

body {
  margin: 0;
}

section {
  height: 100vh;
  width: 100%;

  scroll-snap-align: start;
  scroll-snap-stop: always;
}
<section style="background-color: red;"></section>
<section style="background-color: blue;"></section>
<section style="background-color: green;"></section>

在 Firefox（85 版）中，这给了我想要的行为：平滑滚动，无论我如何滚动（鼠标滚轮、触摸屏、触摸板），都会在每一点停止。但是，当我在 Chrome（88 版）中滚动浏览同一页面时，单击鼠标滚轮会迅速跳到底部。我希望scroll-snap-stop: always解决这个问题，但它仍然会发生。有谁知道如何让全屏滚动捕捉在两个浏览器之间保持一致？

标签： htmlcss

解决方案

推荐阅读