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

*,::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:horizontal {
height: 0
}

::-webkit-scrollbar-thumb:vertical {
background: rgba(0,0,0,.5);
border-radius: 100px
}

::-webkit-scrollbar-thumb:active {
background: rgba(0,0,0,.61);
border-radius: 100px
}

原文地址:https://www.cnblogs.com/yang6/p/12161797.html

时间: 2024-08-01 01:54:32

浏览器滚动条样式表-参考喜马拉雅的相关文章

自定义类StyleSheet跨浏览器操作样式表中的规则

这是群里网友地瓜提供的一个类,不熟悉样式的浏览器差异的可以看看 /** * Stylesheet.js: utility methods for scripting CSS stylesheets. * * This module defines a Stylesheet class that is a simple wrapper * around an element of the document.styleSheets[] array. It defines useful * cross

修改浏览器滚动条样式

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

浏览器默认样式表

1 html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/ 2 li { display: list

自定义浏览器滚动条样式

为了有助于理解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:

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

更新浏览器CSS样式表

例: <link rel="stylesheet" href="css/c1.css?v=1" type="text/css"> ?v=1 https://stackoverflow.com/questions/1614429/what-is-style-cssver-1-tag 原文地址:https://www.cnblogs.com/vannn/p/8448965.html

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

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