PC 端 html 页面滑动条（滚动条）修改样式、自定义样式

看到公司官网的滑动条样式做了修改，活动条变窄，颜色变深。不注意看都会忽视滑动条的存在。

这样修改滑动条可以使展示页面变宽，可以展示更多的细节。但现如今的网页大都适配性较好，弹性布局，滑动条让出来的哪一点儿空间可有可无。但修改滑动条样式的方法，可以学习一下。

主要使用 ::-webkit-scrollbar ，这是一种非标准的特性，属于 CSS 伪类选择器，影响了一个元素的滚动条的样式。

兼容性：::-webkit-scrollbar 仅仅在支持 WebKit 的浏览器 (例如, 谷歌 Chrome, 苹果 Safari)可以使用.)

相关伪元素选择器：

::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

mozilla 上的例子（应用在元素上）：

.visible-scrollbar, .invisible-scrollbar, .mostly-customized-scrollbar {
  display: block;
  width: 10em;
  overflow: auto;
  height: 2em;
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}
/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    background: #000; 
}

<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
<div class="mostly-customized-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword<br>
And pretty tall<br>
thing with weird scrollbars.<br>
Who thought scrollbars could be made weeeeird?</div>

代码中的修改方案（页面滑动条）：

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.7);
    -webkit-border-radius: 6px;
}

网上找到的修改方案（页面滑动条）：

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* 正常情况下滑块的样式 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 2px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/* 鼠标悬浮在该类指向的控件上时滑块的样式 */
:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    border-radius: 2px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/* 鼠标悬浮在滑块上时滑块的样式 */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

/* 正常时候的主干部分 */
::-webkit-scrollbar-track {
    border-radius: 2px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
    background-color: inherit;
}

/* 鼠标悬浮在滚动条上的主干部分 */
::-webkit-scrollbar-track:hover {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
    background-color: inherit;
}

参考：

::-webkit-scrollbar - CSS（层叠样式表） | MDN
页面滚动条样式自定义方法 - JohnZhongJob的博客

PC 端 html 页面滑动条（滚动条）修改样式、自定义样式

添加新评论