使用 CSS Scroll Snap 优化滚动，提升用户体验！

Item 1

Item 2

Item 3

Item 4

Item 5

mandatory关键字意味着浏览器必须捕捉到每个滚动点。假设roll-snap-align属性有一个start值。这意味着，滚动必须对齐到滚动容器的开始处。

.section {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

滚动容器的子项目需要一个对齐点，它们可以对齐到这个点。我们可以用start, center或end。

.child {
  scroll-snap-align: start;//start、center、end
}

scroll-snap-stop的默认值是normal,要强制滚动捕捉到每个可能的点，应使用always。

.section__item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}