使用CSS美化Chrome下的滚动条样式

来源：互联网发布：域名转国外注册商流程编辑：程序博客网时间：2024/05/21 10:16

浏览器原生的滚动条有时过多会影响界面美观，IE下的滚动条更是如此，有时我们需要美化一下滚动条，可以使用浏览器原生的样式，或者使用JS插件，这里介绍如何修改Chrome下的滚动条样式。

主要借助伪元素实现：

//index.html<body>    <div class="container">        <p>Pellentesque habitant morbi tristique senectus...(很多文字)</p>    </div></body>

//style.css.container {    width: 300px;    height: 100px;    overflow: auto;}p {    width: 500px;    height: 200px;}::-webkit-scrollbar {    width: 10px;    height: 10px;    /*background-color: #ddd;*/}/*滑块*/::-webkit-scrollbar-thumb {    background-color: #333;    border-radius: 10px;}::-webkit-scrollbar-thumb:hover {    background-color: #777;}/*滑道*/::-webkit-scrollbar-track {    box-shadow: inset 0 0 6px #333;    border-radius: 10px;}

运行效果：
这里写图片描述

浏览器默认情况下上下左右各有一个按钮用来滚动，我们也可以自定义图片来代替它：

//style.css//上述代码.../*上下左右按钮*/::-webkit-scrollbar-button {    /*纵方向按钮的高度，宽度由scrollbar定义*/    height: 20px;    /*横方向按钮的高度，高度由scrollbar定义*/    width: 20px;}::-webkit-scrollbar-button:vertical:start {    background-image: url("up.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);    background-repeat: no-repeat;    background-position: bottom left, 0 0;}::-webkit-scrollbar-button:vertical:end {    background-image: url("down.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);    background-repeat: no-repeat;    background-position: bottom left, 0 0;}::-webkit-scrollbar-button:horizontal:start {    background-image: url("left.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);    background-repeat: no-repeat;    background-position: bottom left, 0 0;}::-webkit-scrollbar-button:horizontal:end {    background-image: url("right.png"), -webkit-linear-gradient(left, #f9f9f9 50%, #e2e2e2 100%);    background-repeat: no-repeat;    background-position: bottom left, 0 0;}

运行效果：
这里写图片描述

以上代码只在Chrome下可行，其他浏览器兼容性可参考http://caniuse.com/#search=scrollbar

源码地址： https://github.com/justforuse/HTML-CSS-JS/tree/master/webkit-scrollbar/final

参考链接：
https://scotch.io/tutorials/customize-the-browsers-scrollbar-with-css
http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

使用JS插件的话可以上gayhub查找相关项目，在此列举2个：

https://github.com/cubiq/iscroll
https://github.com/inuyaksa/jquery.nicescroll

阅读全文

0 0