MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

::-webkit-scrollbar

翻译正在进行中。

草案
本页尚未完工.

非标准
该特性是非标准的,请尽量不要在生产环境中使用它!

描述

这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

::-webkit-scrollbar is only available in WebKit-based browsers (e.g., Google Chrome).

语法

::-webkit-scrollbar { styles here }

例子

.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>

See also

文档标签和贡献者

 此页面的贡献者: Messiah
 最后编辑者: Messiah,