归纳一下几个常用的CSS滚动属性

290 阅读2分钟

Scroll Snap

Scroll Snaps可以用于创建平滑滚动的容器,旨在为开发者提供良好控制的滚动体验

scroll-behavior

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

.scroll-container {
    scroll-behavior: smooth;
}

overscroll-behavior

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

  • auto:默认值
  • contain:默认滚动边界不变,临近滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动
  • none:临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。

overflow-anchor

overflow-anchor: auto | none

用于指定浏览器滚动锚定的行为,通常表现为执行滚动锚定;overflow-anchor:none则表示禁止滚动锚定的行为。

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 可以让滚动条出现的时候内容不晃动。

实现原理是把滚动条的位置提前预留好(空白)

::-webkit-scrollbar

用于调整滚动条样式的属性

  • ::-webkit-scrollbar——整个滚动条。
  • ::-webkit-scrollbar-button——滚动条上的按钮(上下箭头)。
  • ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
  • ::-webkit-scrollbar-track——滚动条轨道。
  • ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
  • ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
  • ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。