在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
分享到：
相关推荐
} ::-webkit-scrollbar-thumb：hover {background-color：＃a2c437; } / * 2.只需转到此扩展文件夹（Your-Default-Chrome-Extension-Folder \ Default \ Extensions \ hnnpahlmflcceeadbeollhmmkfhfelnn \ 1.0.1_0）...
windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条， 故回头翻了一下CSS3， 还真能不用插件实现自定义滚动条的...::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
Tailwind CSS的滚动条插件 为Firefox和基于Webkit的浏览器中的滚动条添加样式实用程序。安装yarn add -D tailwind-scrollbar 或者npm install --save-dev tailwind-scrollbar 将其添加到Tailwind配置的plugins数组中...
•::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） •::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） •::-webkit-scrollbar-...
} /*滚动条垂直方向的宽度与水平方向的高度*/ ::-webkit-scrollbar-button{} /*滚动条按钮*/ ::-webkit-scrollbar-track{} /*滚动条轨道*/ ::-webkit-scrollbar-track-piece:vertical{} /*滚动条垂直方向轨道件*/ ::...
::-webkit-scrollbar-track/*滑动轨道*/{-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0px;background: rgba(0,0,0,0.1);} ::-webkit-scrollbar-thumb/*滑块*/{border-radius: 5px;-webkit-...
::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 ::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景...
name::-webkit-scrollbar-track //滚动条滑轨 name::-webkit-scrollbar-thumb //滚动条内部滑块 注：以上3个均为伪类，请将name更改为需要改变的元素名称 例如:改变整体页面的滚动条样式 body::-webkit-scrollbar{ ...
本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。 0.需求 有的时候我们不想使用浏览器默认的滚动条...::-webkit-scrollbar-thumb — 滚动条上的
css滚动条样式修改的代码 .scroll::-webkit-scrollbar { // 纵向滚动条和横向滚动条宽度 width: 1px; height: 1px; } .scroll::-webkit-scrollbar-thumb { // 滚动条背景条....scroll::-webkit-scrollbar-track {
webkit滚动条样式重置 1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。 2、scrollbar corner为横向和竖向的...-webkit-scrollbar /
:: -webkit-scrollbar-track { background : # fff ; } /* set the color of handle here */ :: -webkit-scrollbar-thumb { background : # e94057 ; } /* set the color of handle on hover
语言:English 绿色滚动条。 纯CSS3，没有JS。...} ::-webkit-scrollbar-thum {{border-radius：5px; 背景颜色：白色； -webkit-box-shadow：2px 2px 6px rgba（0,0,0，.5），插入-2px 2px 2px 2px rgba
css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ...::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); border-radius: 10px; background-color: rgba(240, 240,
看着有的网站打开后，浏览器滚动条很好看。自己特意去拔了一个， 如果是RiPro主题，请在后台顶部设置添加自定义CSS。其他主题在对应的CSS样式添加。 /**====滚动条样式====*/ ...::-webkit-scrollbar-track {/*滚动
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...
本篇文章主要介绍了CSS3自定义滚动条样式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
将它们设置为内联样式，无需任何外部 CSS。 用法 使用 npm 安装react-input-textarea ： npm install react - input - textarea 然后在您的代码中使用它，如下所示： var Input = require ( 'react-input-...
小程序的scroll-view用的比较多了，列表页一般也没管它的滚动条，最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢，ios上直接就不显示啊，也是没...上图位置<1>:-webkit-scrollbar 滚动条整体部分