webkit内核下美化浏览器滚动条样式，支持chrome和safari浏览器
直接上css
html {
overflow: auto;
}
body {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
padding: 30px;
overflow-y: scroll;
overflow-x: hidden;
}
/* Let's get this party started */
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-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);
}
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
相关文章
通过CSS截取文字长度2023-01-02
display:inline-block 水平居中无效的解决办法2019-03-07
CSS中font-family：中文字体的英文名称 2018-11-06
css3 nth-child选择器2018-11-04
CSS3 transform多种组合2018-10-26
CSS样式在IE6中失效的解决方案2013-05-06
chrome margin失效的解决办法2013-04-19
使用css调整文字间距2013-04-10
div 垂直居中完美解决办法2013-03-18
background 透明，文字不透明2012-06-03