0
点赞
收藏
分享

微信扫一扫

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

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

Scroll Snap

Scroll Snap 是一个 CSS 独立模块,可以让滚动元素停止的时候有吸附效果,非常容易实现类似 Swiper 这种交互,甚至是那种可以滑来滑去的选项卡交互效果。

scroll-behavior

scroll-behavior 可以让滚动容器出现锚点定位,或者 JS 设置 scrollLeft/scrollTop 滚动距离时候表现为平滑定位。

overscroll-behavior

overscroll-behavior 属性可以让滚动嵌套时父滚动不触发,比方说弹框中的滚动滚到底部的时候,背后的页面会纹丝不动。

overflow-anchor

overflow-anchor 属性我之前也介绍过,详见“CSS overflow-anchor属性与滚动锚定”一文。


这个属性作用是让页面图片动态加载了很多内容的时候,当前视区的内容保持不变。


例如看漫画,上面有些漫画图片还没加载好,你已经看到后面,此时,如果上面的图片加载正常,高度撑高,则当前你看的漫画位置会纹丝不动,不会被推下来。


这就是 overflow-anchor 属性的作用。

scrollbar-width

scrollbar-width 可以用来自定义滚动条的宽度,不过不能指定具体数值,只能是正常(17px),细(8px)和没有,语法如下:


scrollbar-width: auto | thin | none;

主要针对 windows 系统下的 Firefox 浏览器,因为 Mac OS X 或iOS 操作系统滚动条默认就不占据宽度,没必要使用这个,而 Chrome 浏览器可以使用 -webkit-scrollbar 伪元素自定义滚动条的宽度,用不到 scrollbar-width 设置。

scrollbar-color

scrollbar-color 可以设置滚动条的颜色,和 scrollbar-width 一样,仅 Firefox 浏览器支持,语法如下:


scrollbar-color: auto | 滑杆颜色 轨道颜色;

和 scrollbar-width 属性一起,填补了 Firefox 浏览器滚动条样式无法自定义的空白。


例如:


.container {

    scrollbar-width: thin;

    scrollbar-color: #0009 transparent;

}

scrollbar-gutter

scrollbar-gutter 可以让滚动条出现的时候内容不晃动。

举报

相关推荐

0 条评论