强大的CSS：scroll-snap滚动事件停止及元素位置检测

最新推荐文章于 2025-07-28 10:20:21 发布

前端老司机

最新推荐文章于 2025-07-28 10:20:21 发布

阅读量658

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css 前端开发 web前端前端基础前端

本文链接：https://blog.youkuaiyun.com/kaixinyitian77/article/details/90415776

本文介绍了CSS Scroll Snap在前端开发中的应用，详细阐述了如何利用CSS实现平滑滚动定位，并探讨了在实际项目中遇到的滚动停止检测和当前滚动目标元素检测的问题。通过JavaScript辅助，实现了滚动事件的精确控制，以达到良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Scroll Snap是前端必备技能

CSS Scroll Snap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。

而且CSS Scroll Snap的兼容性非常好，移动端几乎可以放心使用。

二、源自实际项目的scroll-snap场景

今天下午在实现一个功能需求的时候，正好遇到一个场景非常适合使用Scroll Snap来实现，滑动依次显示人物角色。于是就大胆使用了下，哇，好棒，无需任何js做边界判断，滑动停止自动定位到想要的位置。

关键CSS代码如下：

ul {
    width: 375px; height: 667px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    overflow-y: hidden;    
}
li {
    display: inline-block;
    width: 100%; height: 100%;
    scroll-snap-align: center;
}

滚动父容器元素设置scroll-snap-type:x mandatory，水平滚动，强制定位，子列表元素设置scroll-snap-align:center让列表在滚动容器的中间显示，于是效果达成。

然而，滚动定位结束后，还需要需要高亮当前定位的人物素材。我发现有些难办了！