介绍 8 个和滚动相关的 CSS 属性

186 阅读1分钟

①Scroll Snap 是一个 CSS 独立模块,可以让滚动元素停止的时候有吸附效果,非常容易实现类似 Swiper 这种交互,甚至是那种可以滑来滑去的选项卡交互效果;
②scroll-behavior 可以让滚动容器出现锚点定位,或者 JS 设置 scrollLeft/scrollTop 滚动距离时候表现为平滑定位;
③overscroll-behavior 属性可以让滚动嵌套时父滚动不触发,比方说弹框中的滚动滚到底部的时候,背后的页面会纹丝不动;
④overflow-anchor 这个属性作用是让页面图片动态加载了很多内容的时候,当前视区的内容保持不变;
⑤scrollbar-width 可以用来自定义滚动条的宽度,不过不能指定具体数值,只能是正常(17px),细(8px)和没有;
⑥scrollbar-color 可以设置滚动条的颜色,和 scrollbar-width 一样,仅 Firefox 浏览器支持,scrollbar-color: auto | 滑杆颜色 轨道颜色;
⑦scrollbar-gutter 可以让滚动条出现的时候内容不晃动;
⑧-webkit-overflow-scrolling 是一个私有属性,可以让 iOS 下滚动有回弹效果,iOS 13 之后,不需要再设置 -webkit-overflow-scrolling: touch 了,因为所有可滚动的框架,或者设置 overflow 滚动的元素默认都是弹性效果了;
(参考:www.zhangxinxu.com/wordpress/2…