设置浏览器滚动条样式

1.设置隐藏滚动条

::-webkit-scrollbar{

　　display:none;

}

2.设置滚动条样式

/*********改变浏览器滚动条的样式****************/
::-webkit-scrollbar/*整体部分*/{width: 10px; height:10px; }
::-webkit-scrollbar-track/*滑动轨道*/{ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); }
::-webkit-scrollbar-thumb/*滑块*/{ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb:hover/*滑块效果*/{ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.4); }

时间： 2024-12-12 01:58:59

设置浏览器滚动条样式的相关文章

修改浏览器滚动条样式

滚动条样式修改,没有找到修改火狐浏览器滚动条的代码 把以下样式加入css,图片为谷歌.safari.qq浏览器.360浏览器滚动条样式和ie滚动条样式及ie原始默认样式 /*谷歌.safari.qq浏览器.360浏览器滚动条样式*/ /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-web

自定义浏览器滚动条样式

为了有助于理解IE中滚动条样式的控制,你可以查看如下的图片: 经过不断的测试发现,在Win8 下面,有一部分样式都起着相同的作用.估计是因为在Win8中扁平化的界面设计而重新定议了系统中滚动条!以下是Win 8下面的滚动条样式,并写出了和CSS支持的情况: 以上所写的几个四个CSS属性,足以控制Win 8系统下,IE浏览器的滚动条样式了.但经过测试,发现,其它的四个属性仍然支持(主要是在以上几个属性空缺时,就会体现其作用).具体如下: 关于scrollbar-track-color,scroll

bootshrap会改变IE浏览器滚动条样式

在某个小网站的开发中客户一直抱怨在IE11中网页右边滚动条不一样后来发现在IE11中,有2个页面滚动条会自动隐藏,一开始以为是浏览器默认行为,改了overflow:scroll后也没有用.仔细观察后发现这2个页面因为用了bootshrap的特效而引用了bootshrap.css文件,于是确定是bootshrap.css中的问题. 排查后发现是以下代码导致的. @-ms-viewport {width: device-width;} 在此mark一下,也为出现问题的朋友提供下帮助.

浏览器滚动条样式更改

/* webkit内核浏览器 */ ::-webkit-scrollbar {width: 8px;} ::-webkit-scrollbar-button {width: 8px;height: 5px;} ::-webkit-scrollbar-track { border-radius: 0px;} ::-webkit-scrollbar-thumb {background: #999;border-radius: 0px;} ::-webkit-scrollbar-thumb:hover

设置浏览器默认样式

选中文本时的字体颜色::selection { color: white; background: #0aa284;} 去掉chrome记住密码后自动填充表单的黄色背景input:-webkit-autofill {-webkit-box-shadow:0 0 0px 1000px white inset; border : 1px solid #CCC !important ;} chrome字体缩小.chrome_adjust { font-size: 9px; -webkit-transf

浏览器滚动条样式表-参考喜马拉雅

*,::after,::before { -webkit-box-sizing: border-box; box-sizing: border-box} ::-webkit-scrollbar { width: 8px; background-color: #c1787800; border-radius: 100px;} ::-webkit-scrollbar:hover { background-color: rgba(0,0,0,.09)} ::-webkit-scrollbar:hori

自定义浏览器滚动条的样式，打造属于你的滚动条风格——兼容IE和webkit(ff不支持)

前段时间,到网上找素材时,看到了一个很个性的滚动条式,打开Chrome的调试工具看了一下,发现不是用JavaScript来模拟实现的,觉得 有必要折腾一下.于是在各大浏览器中对比了一下,发现只用Chrome适用,也就是说这个用的是Chrome的私有CSS属性.便百之谷之后,发现原来不 仅仅只用Chrome,其它的浏览器在不同程度上支持自定义滚动条样式的.下面是我不断测试的结果,若有错误或不全,请在评论里面给出,我会立马更正:若 有更好的方案,你可以留言,让大家都开开眼界...... 自定义IE浏

如何修改浏览器默认滚动条样式

/*浏览器滚动条样式*/ /* width */ ::-webkit-scrollbar { width: 4px; height: 4px; } /* Track */ ::-webkit-scrollbar-track { background: rgb(255, 255, 255); border-radius: 8px; } /* Handle */ ::-webkit-scrollbar-thumb { background: rgb(201, 201, 202); border-ra

美化滚动条样式

大家好,最近项目里用到美化浏览器滚动条样式,我也总结一下,分析给大家,挺好用的哦 ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } ::-webkit-scrollbar-track { box-shadow: 1px 1px