在IE中可以自定义滚动条的样式 ,基于webkit的浏览器现在也可以自定义其样式:
::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ }
::-webkit-scrollbar-track-piece { /* 4 */ }
::-webkit-scrollbar-thumb { /* 5 */ }
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
border:1px solid #666666
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
.test{
width:100px;
height:200px;
overflow:scroll;
border:1px solid #666666;
}
<div class="test">kfalsdfjlasjldf</div>
参考:
http://www.webkit.org/blog/363/styling-scrollbars/
http://css-tricks.com/9130-custom-scrollbars-in-webkit/
http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp
分享到:
相关推荐
.react-perfect-scrollbar::-webkit-scrollbar-thumb { background-color: #yourColor; } /* 更多其他自定义属性 */ .react-perfect-scrollbar::-webkit-scrollbar-track { background-color: #yourTrackColor; }...
首先,CSS3提供了`::-webkit-scrollbar`和`::-webkit-scrollbar-part`选择器,用于自定义Webkit内核浏览器(如Chrome、Safari)的滚动条。`::-webkit-scrollbar`用于设置整体滚动条的样式,而`::-webkit-scrollbar-...
接着,我们可以进一步细化滚动条的各个部分,包括轨道(`-webkit-scrollbar-track`)、滑块(`-webkit-scrollbar-thumb`)、滑块在鼠标悬停时的样式(`-webkit-scrollbar-thumb:hover`)以及滑块在按下状态时的样式(`-...
} ::-webkit-scrollbar-thumb:hover {background-color:#a2c437; } / * 2.只需转到此扩展文件夹(Your-Default-Chrome-Extension-Folder \ Default \ Extensions \ hnnpahlmflcceeadbeollhmmkfhfelnn \ 1.0.1_0)...
总结,自定义浏览器滚动条宽度主要依赖CSS3的`scrollbar-width`和WebKit特定的伪元素。虽然不同浏览器的支持程度不同,但通过合理的兼容性处理和使用JavaScript库,可以在大多数现代浏览器中实现定制滚动条的效果。...
2. `::-webkit-scrollbar-thumb`: 选取滚动条上的滑块部分,也就是用户拖动的部分。 3. `::-webkit-scrollbar-track`: 选取滚动条的轨道部分。 4. `::-webkit-scrollbar-thumb:hover`: 当滑块被鼠标悬停时的样式。 5...
9. `-webkit-scrollbar-track-hover-color` 和 `-webkit-scrollbar-track-active-color`:分别用于轨道在鼠标悬停和被按下时的颜色。 例如,以下CSS代码将创建一个蓝色的滚动条,滑块在鼠标悬停时变为深蓝色: ```...
4. `::-webkit-scrollbar-thumb:hover` 和 `::-webkit-scrollbar-thumb:active`:分别用于设置滑块在鼠标悬停和按下时的样式。 5. `::-webkit-scrollbar-button`:选择器用于设置滚动条按钮的样式。 6. `::-webkit-...
但是,随着 CSS3 的发展,现代浏览器(如 Chrome、Firefox 和 Safari)引入了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 等伪元素,使得我们可以自定义滚动条的外观。 以下是一些关键的 CSS 属性,...
2. `-webkit-scrollbar-thumb`:用于定义滚动条滑块部分的样式,可以设置背景颜色、边框和圆角等。 3. `-webkit-scrollbar-track`:定义滚动条轨道的样式。 4. `-webkit-scrollbar-thumb:hover`:当滑块被鼠标悬停时...
首先,我们需要了解CSS中的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`,这两个伪元素分别用于定义滚动条的整体结构和拖动部分(即滚动条轨道和滑块)。例如: ```css /* 定义滚动条宽度 */ ::-...
所以,我们需要使用`-webkit-scrollbar`、`-webkit-scrollbar-thumb`、`-webkit-scrollbar-track`等属性来定义样式。 3. **滚动条宽度** 通过`-webkit-scrollbar`可以设置滚动条的宽度,例如: ```css ::-webkit...
4. `::-webkit-scrollbar-thumb:hover` 和 `::-webkit-scrollbar-thumb:active`:分别用于定义滑块在鼠标悬停和按下时的样式。 5. `::-webkit-scrollbar-button`:选择器用于定义滚动条两端的按钮,但并非所有浏览器...
4. `::-webkit-scrollbar-thumb:hover`:当鼠标悬停在滚动条滑块上时,此伪元素定义的样式将被应用,提供一个交互效果。通常我们可以改变滑块的背景颜色,使得用户能明显地看到当前交互的元素。 实际操作中,开发者...
在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-corner` 来分别定义滚动条的宽度、滚动条滑块(即用户可以拖动的部分)、...
- `::-webkit-scrollbar-track-piece`: 用于定义滚动条轨道的中间部分,通常用于创建分段的轨道效果。 - `::-webkit-scrollbar-corner`: 用于定义滚动条的交叉点,即两个滚动条相交的地方。 - `::-webkit-resizer`: ...
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...
5. `-webkit-scrollbar-track:hover`和`-webkit-scrollbar-track:active`:分别用于定义鼠标悬停和按下状态下的轨道样式。 6. `-webkit-scrollbar-thumb:vertical`和`-webkit-scrollbar-thumb:horizontal`:针对...
5. `-webkit-scrollbar-thumb:hover` 和 `-webkit-scrollbar-thumb:active`:分别定义滑块在鼠标悬停和按下时的样式。 6. `-webkit-scrollbar-track`:定义滚动条轨道的样式。 7. `-webkit-scrollbar-track-piece`:...
在CSS3中,我们可以使用`::-webkit-scrollbar`选择器来选择滚动条,并通过`::-webkit-scrollbar-thumb`来选择滑块。例如: ```css body::-webkit-scrollbar { width: 12px; /* 定义滚动条宽度 */ } body::-webkit...