具有溢出y的Scroll snap css属性导致页面滚动

Question

我正在使用css属性scroll-snap-type将溢出的div snap的内容放在滚动上.

它很容易应用:

.container {
  height: 400px;
  overflow-y: scroll;
  scroll-snap-type: mandatory;
}

.contents {
  scroll-snap-align: start;
}

在桌面上的Safari 11+中查看此页面的示例 - https://codepen.io/fionnbharra/full/PQZmav/ 滚动页面左侧的div.注意何时滚动完成div对齐到容器的顶部.这表现得如预期.

我的问题是,当我们有一个长页面时,它会中断 - https://codepen.io/fionnbharra/full/oEbWeq/

尝试滚动相同的溢出div.注意页面主体如何同时滚动,这意味着很难看到原始内容滚动.

这是一个错误吗？难道我做错了什么？

Answer 1

它是仅部分支持的实验技术。Chrome 现在不支持它 (2018-02-07)。 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

您暂时应该使用其他样式。滚动捕捉系列可以用相对定位的附加容器代替。

浏览器通常不实现它或部分实现。使用其他 CSS 样式。

顺便提一句。如果您想确保正确支持样式，请使用 caniuse.com。