<ul>
<li>
<img src="">
</li>
// ...
</ul>ul {
white-space: nowrap; // 超出不换行
overflow-x: auto;
li {
display: inline-block;
img {
display: block;
width: 200px;
}
}
}
效果如下：
滚动结束后，强制滚动到指定元素
基于上面的例子，我们设置如下属性：
ul {
scroll-snap-type: x mandatory; li {
scroll-snap-align: start;
}
}
效果如下：
仔细看会发现，我们松手的时候，会将
最近的元素滚动到最右边（初始位置，对于Y轴来讲就是顶部，X轴则是右边）也可以设置出现在中间：
li {
scroll-snap-align: center;
}效果如下：
这样，一个简易的
轮播图效果就出来啦！还可以实现全屏滚动：
注意：该属性会在你
滚动完之后再做处理，也就是说你可以一下子从
图片1跳到
图片9✅最后
以上涉及到的
方法或属性文档如下： scrollTo
scrollBy
scrollIntoView
scrollingElement
scroll-behavior
-webkit-overflow-scrolling
overscroll-behavior
scroll-snap-type
scroll-snap-align
