scroll-snap-type优化滚动

🧨🧨🧨

大家好，我是搞前端的半夏 🧑，一个热爱写文的前端工程师 💻.
如果喜欢我的文章，可以关注 ➕ 点赞 👍 一起学习交流前端，成为更优秀的工程师～ 更多故事—点我探索新世界！

🧨🧨🧨

前言

相信每个写CSS的前端人，都会跟滚动打交道。滚动即当元素内部的内容太大超出的时候，元素该怎么做。主要是使用overflow来进行设置。今天在制作横向滚动，展示公司产品的时候，遇到了这样一个问题：当用户滚动的，停下来，定位可能是并不是在某一个产品，显示不全。效果：最后停在的位置是在两个猫咪的中间，两个小猫都看不全。

有没有什么方法，当用户滚动停下来的时候，可以自动选择其中的一个猫咪，放在中间。一开始我是使用js来做的。需要监听元素滚动，然后再判断滚动停止，再计算位置，贼麻烦。感觉自己是个假前端。既然是css的问题，我最终还是决定用CSS的方法解决。

scroll snap

在MDN上我找到了这个可以解决我问题的CSS属性