css层滚动条

1. 什么是CSS层滚动条？

CSS层滚动条是CSS3新增的一种基于webkit内核的样式属性，网页开发者可以通过CSS样式来自定义滚动条的样式、宽度、颜色等，滚动条简单易用受到很多开发者的喜欢和青睐。

2. CSS层滚动条属性

CSS层滚动条主要涉及到以下三个属性：

• ::-webkit-scrollbar: 滚动条容器；
• ::-webkit-scrollbar-thumb: 滚动条里面的小块，能拖动滚动条；
• ::-webkit-scrollbar-track: 滚动条的轨道（背景）。

这些属性都使用::来表示伪元素，它们也只能在webkit内核浏览器中使用。

3. 设计CSS层滚动条示例

示例一

以下代码演示如何将滚动条设置为红色的：

/* 应用于滚动条的容器 */
::-webkit-scrollbar {
  width: 10px;   /* 设置滚动条宽度 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: #f5f5f5;   /* 设置滚动条轨道（背景）颜色 */
}

/* 滚动条加载状态变化动画效果 */
::-webkit-scrollbar-thumb {
  background: #ff0000;   /* 设置滚动条颜色 */
}

示例二

以下代码演示如何设置滚动条的宽度为20px，滚动条颜色为蓝色：

/* 应用于滚动条的容器 */
::-webkit-scrollbar {
  width: 20px;  /* 设置滚动条宽度 */
}

/* 滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: #f5f5f5;  /* 设置滚动条轨道（背景）颜色 */
}

/* 滚动条加载状态变化动画效果 */
::-webkit-scrollbar-thumb {
  background: #0e90d2;   /* 设置滚动条颜色 */
}

4.小结

通过以上示例，我们可以看出，通过CSS层滚动条可以自定义滚动条，并为网页提供更美观的视觉效果，但是需注意CSS层滚动条只能在webkit内核浏览器中使用，如果需要在其他浏览器中使用，需要使用JS实现。