以前,我是要努力走出舒适圈
现在,我要努力扩大舒适圈
  1. 首页
  2. 前端
  3. 正文

CSS 纵享丝滑

2025年12月3日

有这样一个需求:移动端用户进到页面后,页面滚动到课程列表页的当前学习课程部分(即滚动到特定位置)。

一、顿挫干瘪的滚动

初看这个需求,是不是超级简单。
只需要利用 <a /> 标签的锚点功能,就能让页面滚动到指定位置:

<a href="#a">课程A</a>

来看看实际效果:

眉头一皱,这顿挫感,犹如坐着八十年代拖拉机一般蓝瘦~

二、scroll-behavior

不要慌,只需要一行简单的 CSS 代码,就能让你的页面纵享德芙般丝滑。

.container {
    scroll-behavior: smooth; 
}

怎么样,是不是丝滑般顺畅,而且代码极其简单。

别高兴的太早了,再通过 caniuse 来看看它的兼容性:

眉头一皱,果然事情不简单,这个特性在移动端 ios 基本不支持。那么在 ios 上只能通过传统的 JS 来实现丝滑滚动了。

三、JS 也能纵享丝滑

方法一:scrollIntoView

scrollIntoView 是原生的 JS API。通过一段简单的代码,也能实现丝滑滚动。

target.scrollIntoView({
    behavior: "smooth"
});

虽然 scrollIntoView 也能实现,但是它的浏览器支持度并不友好,在 ios 上依然不支持,谨慎使用。

方法二:JQuery

JQuery animate() 就能实现这样一个简单的动画:

scrollContainer.animate({
    scrollTop: 0
});

方法三:手撕JS

自己手撕一个德芙滑动其实也很简单,直接上代码:

光看代码感受不到那般丝滑,来看看效果图对比:

丝滑般感受,就是如此简单~

标签: 前端
最后更新:2025年12月3日

Ad Chen

这个人很懒,什么都没留下

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
文章分类
  • 前端
  • 国际政治
  • 思考
  • 教育
  • 经济
最新 热点 随机
最新 热点 随机
CSS 纵享丝滑 日本的狼子野心 如何培养孩子英语能力 不要再寻找例外情况 如何看待教育内卷 当经济学遇到荒岛求生
如何培养孩子英语能力日本的狼子野心CSS 纵享丝滑
观天下之欧洲 CSS 纵享丝滑 设计原则 SOLID 在 React 中应用 观天下之美国 什么时候“买房”更合适 观天下之全球经济

COPYRIGHT © 2025 老陈瞎说. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang