修改浏览器滚动条样式

滚动条样式修改,没有找到修改火狐浏览器滚动条的代码

把以下样式加入css,图片为谷歌、safari、qq浏览器、360浏览器滚动条样式和ie滚动条样式及ie原始默认样式

/*谷歌、safari、qq浏览器、360浏览器滚动条样式*/

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar

{

width: 10px;

height: 10px;

background-color: #F5F5F5;

}

/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track

{

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

border-radius: 10px;

background-color: #F5F5F5;

}

/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb

{

border-radius: 10px;

-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);

background-color: #bdbdbd;

}

/*滑块效果*/

::-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);

}

/*IE滚动条颜色*/

html {

scrollbar-face-color:#bfbfbf;/*滚动条颜色*/

scrollbar-highlight-color:#000;

scrollbar-3dlight-color:#000;

scrollbar-darkshadow-color:#000;

scrollbar-Shadow-color:#adadad;/*滑块边色*/

scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/

scrollbar-track-color:#eeeeee;/*背景颜色*/

}

时间: 2024-11-12 17:31:08

修改浏览器滚动条样式的相关文章

自定义浏览器滚动条样式

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

设置浏览器滚动条样式

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:

修改element-ui滚动条样式

//滚动条的宽度 .your-table .el-table__body-wrapper::-webkit-scrollbar { width: 10px; height: 10px; } //滚动条的滑块 .your-table .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #a1a3a9; border-radius: 3px; } 如果是整个页面的滚动条风格是一致的,直接改全局的滚动条样式也可以有效

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

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

*,::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

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

/*浏览器滚动条样式*/ /* 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

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

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

美化滚动条样式

大家好,最近项目里用到美化浏览器滚动条样式,我也总结一下,分析给大家,挺好用的哦 ::-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