3

我一直在尝试实现一个超级简单的水平快照滚动（如下所示：https ://css-tricks.com/practical-css-scroll-snapping ），但我一直失败。我可能已经在这里搜索了所有问题和答案，但没有任何帮助。

我的代码很简单，我只scroll-snap-type: y mandatory;在父母和scroll-snap-align: center;孩子身上声明。而且我很确定这不是浏览器问题（因为我已经用许多不同的浏览器尝试过）。我在这里想念什么？或者我不明白什么？

这是我的（不工作的）CodePen：https ://codepen.io/anon/pen/XyNNGY

html:

<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child two'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

CSS：

  body {
    margin: 0;
  }

  .parent {
    scroll-snap-type: y mandatory;
  }

  .child {
    scroll-snap-align: center;
    width: 100vw;
    height: 100vh;
    background-color: pink;
  }

  .two {
    background-color: crimson;
  }

已经谢谢一百万了。

4

2 回答 2

1

您指定为滚动捕捉容器的元素必须是滚动条所附加的元素。在您的情况下，父元素没有滚动条 - 滚动条属于视口，并且父元素超出视口的大小而不生成自己的滚动条。因此，该scroll-snap-type属性应应用于body（或html），而不是父级：

body {
  margin: 0;
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: center;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}

.two {
  background-color: crimson;
}
<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child two'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

于 2018-11-12T18:45:15.187 回答
1

像这样试试。

body {
  margin: 0;
}

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

.child {
  scroll-snap-align: center;
  height: 100vh;
  background-color: pink;
}

.child:nth-child(even) {
  background-color: crimson;
}
<div class='parent'>
  <div class='child'>Section 1</div>
  <div class='child'>Section 2</div>
  <div class='child'>Section 3</div>
</div>

于 2018-11-12T17:39:13.203 回答