`
lmh2072005
  • 浏览: 113835 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

css之-webkit-scrollbar

    博客分类:
  • css
阅读更多

 

在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

    .react-perfect-scrollbar::-webkit-scrollbar-thumb { background-color: #yourColor; } /* 更多其他自定义属性 */ .react-perfect-scrollbar::-webkit-scrollbar-track { background-color: #yourTrackColor; }...

    css3 滚动条美化

    首先,CSS3提供了`::-webkit-scrollbar`和`::-webkit-scrollbar-part`选择器,用于自定义Webkit内核浏览器(如Chrome、Safari)的滚动条。`::-webkit-scrollbar`用于设置整体滚动条的样式,而`::-webkit-scrollbar-...

    Web-前端html+css从入门到精通 234. CSS新特性之scrollbar.zip

    接着,我们可以进一步细化滚动条的各个部分,包括轨道(`-webkit-scrollbar-track`)、滑块(`-webkit-scrollbar-thumb`)、滑块在鼠标悬停时的样式(`-webkit-scrollbar-thumb:hover`)以及滑块在按下状态时的样式(`-...

    绿色滚动条 - 纯CSS3(来自ZIG)「Green Scroll Bar - Pure CSS3 (from ZIG)」-crx插件

    } ::-webkit-scrollbar-thumb:hover {background-color:#a2c437; } / * 2.只需转到此扩展文件夹(Your-Default-Chrome-Extension-Folder \ Default \ Extensions \ hnnpahlmflcceeadbeollhmmkfhfelnn \ 1.0.1_0)...

    浏览器滚动条设置 scrollBar

    总结,自定义浏览器滚动条宽度主要依赖CSS3的`scrollbar-width`和WebKit特定的伪元素。虽然不同浏览器的支持程度不同,但通过合理的兼容性处理和使用JavaScript库,可以在大多数现代浏览器中实现定制滚动条的效果。...

    div滚动条样式一览-div+css设计网

    2. `::-webkit-scrollbar-thumb`: 选取滚动条上的滑块部分,也就是用户拖动的部分。 3. `::-webkit-scrollbar-track`: 选取滚动条的轨道部分。 4. `::-webkit-scrollbar-thumb:hover`: 当滑块被鼠标悬停时的样式。 5...

    css.rar_css

    9. `-webkit-scrollbar-track-hover-color` 和 `-webkit-scrollbar-track-active-color`:分别用于轨道在鼠标悬停和被按下时的颜色。 例如,以下CSS代码将创建一个蓝色的滚动条,滑块在鼠标悬停时变为深蓝色: ```...

    CSS如何设置滚动条样式?.docx

    4. `::-webkit-scrollbar-thumb:hover` 和 `::-webkit-scrollbar-thumb:active`:分别用于设置滑块在鼠标悬停和按下时的样式。 5. `::-webkit-scrollbar-button`:选择器用于设置滚动条按钮的样式。 6. `::-webkit-...

    Html+CSS实现滚动条不挤占内容区宽度.zip

    但是,随着 CSS3 的发展,现代浏览器(如 Chrome、Firefox 和 Safari)引入了 `::-webkit-scrollbar` 和 `::-webkit-scrollbar-thumb` 等伪元素,使得我们可以自定义滚动条的外观。 以下是一些关键的 CSS 属性,...

    一款好看的DIV+CSS滚动条

    2. `-webkit-scrollbar-thumb`:用于定义滚动条滑块部分的样式,可以设置背景颜色、边框和圆角等。 3. `-webkit-scrollbar-track`:定义滚动条轨道的样式。 4. `-webkit-scrollbar-thumb:hover`:当滑块被鼠标悬停时...

    css-scrollbar-tutorial:制作自定义CSS滚动条的示例代码

    首先,我们需要了解CSS中的伪元素`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`,这两个伪元素分别用于定义滚动条的整体结构和拖动部分(即滚动条轨道和滑块)。例如: ```css /* 定义滚动条宽度 */ ::-...

    HTML中滚动条各种样式示例

    所以,我们需要使用`-webkit-scrollbar`、`-webkit-scrollbar-thumb`、`-webkit-scrollbar-track`等属性来定义样式。 3. **滚动条宽度** 通过`-webkit-scrollbar`可以设置滚动条的宽度,例如: ```css ::-webkit...

    css 自定义滚动条实现

    4. `::-webkit-scrollbar-thumb:hover` 和 `::-webkit-scrollbar-thumb:active`:分别用于定义滑块在鼠标悬停和按下时的样式。 5. `::-webkit-scrollbar-button`:选择器用于定义滚动条两端的按钮,但并非所有浏览器...

    纯CSS改变webkit内核浏览器的滚动条样式

    4. `::-webkit-scrollbar-thumb:hover`:当鼠标悬停在滚动条滑块上时,此伪元素定义的样式将被应用,提供一个交互效果。通常我们可以改变滑块的背景颜色,使得用户能明显地看到当前交互的元素。 实际操作中,开发者...

    滚动条样式 html css

    在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-track` 和 `::-webkit-scrollbar-corner` 来分别定义滚动条的宽度、滚动条滑块(即用户可以拖动的部分)、...

    CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解

    - `::-webkit-scrollbar-track-piece`: 用于定义滚动条轨道的中间部分,通常用于创建分段的轨道效果。 - `::-webkit-scrollbar-corner`: 用于定义滚动条的交叉点,即两个滚动条相交的地方。 - `::-webkit-resizer`: ...

    tailwind-scrollbar:Tailwind CSS的滚动条插件

    Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...

    CssScrollbar-滚动条样式制作

    5. `-webkit-scrollbar-track:hover`和`-webkit-scrollbar-track:active`:分别用于定义鼠标悬停和按下状态下的轨道样式。 6. `-webkit-scrollbar-thumb:vertical`和`-webkit-scrollbar-thumb:horizontal`:针对...

    漂亮的滚动条.rar

    5. `-webkit-scrollbar-thumb:hover` 和 `-webkit-scrollbar-thumb:active`:分别定义滑块在鼠标悬停和按下时的样式。 6. `-webkit-scrollbar-track`:定义滚动条轨道的样式。 7. `-webkit-scrollbar-track-piece`:...

    css美化滚动条

    在CSS3中,我们可以使用`::-webkit-scrollbar`选择器来选择滚动条,并通过`::-webkit-scrollbar-thumb`来选择滑块。例如: ```css body::-webkit-scrollbar { width: 12px; /* 定义滚动条宽度 */ } body::-webkit...

Global site tag (gtag.js) - Google Analytics