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。

如何解决？

因此，您要做的只是确保滚动元素与父包装元素完全相关，在您的情况下，滚动元素由screen类名指示。要确保您在右侧看到的滚动条，应制作screen和body，溢出到html以防止它们滚动。 ：

hidden

然后您需要启用右侧滚动条，该滚动条属于html, body { overflow: hidden; }部门。

screen

所以它将像魅力一样工作。

以下是实际工作示例：codepen.io

此外，SO中也存在类似的问题，您可以找到here。

滚动对齐和滚动对齐类型不够？

1 个答案:

到底是什么问题？

如何解决？