scroll-snap-align 和 scroll-snap-type 不够？

Question

我正在尝试使用这个：
https://developer.mozilla.org/docs/Web/CSS/scroll-snap-type
https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align

我要复现的例子：https://codepen.io/mykiwi/pen/xxwPKJr?editors=1100

<div class="scroller">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

.scroller {
  text-align:left;
  height:250px;
  width:270px;
  overflow-y:scroll;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  border:1px solid #000;
  scroll-snap-type:y mandatory
}
.scroller>div {
  flex:0 0 250px;
  background-color:#663399;
  color:#fff;
  font-size:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
}
.scroller>div:nth-child(even) {
  background-color:#fff;
  color:#663399
}

我的代码：https://codepen.io/mykiwi/pen/mdeqePo?editors=1100
我的后台也有Bulma

为了重现示例，我的 CSS 有什么问题/缺少什么？
谢谢

Answer 1

要让它工作起来有点棘手，而且由于 MDN 没有很好地描述它，这使得它变得更加困难。

---

究竟是什么问题？

您提供的包装元素不符合执行此类操作的期望。那么是什么意思呢？

为确保scroll-snap-type 正常工作我们应该确保窗口中唯一可用的滚动条是我们的包装元素滚动条，在您的情况下，它是按类名划分的@987654324 @。

如何解决？

所以您要做的就是确保滚动元素与您的父包装元素完全相关，在您的情况下，它由screen 类名指示。为了确保您在右侧看到的滚动条您应该将body 和html 溢出到hidden 以防止它们滚动。 就像这样：

html,
body {
  overflow: hidden;
}

那你需要启用右侧滚动条，它属于screen部门。

.screen {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

所以它会像魅力一样发挥作用。

这里是实时工作示例：codepen.io

---

另外，SO 中有一个类似的问题，你可以找到here。