CSS自定义滚动条样式案例详解_CSS/HTML

来源:脚本之家  责任编辑:小易  

CSS3自定义滚动条样式 -webkit-scrollbar

当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。

首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。

滚动条的css样式主要有三部分组成:

    ::-webkit-scrollbar   定义了滚动条整体的样式; ::-webkit-scrollbar-thumb  滑块部分; ::-webkit-scrollbar-thumb  轨道部分;

下面以overflow-y:auto;为例(overflow-x:auto同)

html代码:

<div class="test test-1">
    <div class="scrollbar"></div>
</div>

css代码:

.test{
    width: 50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
}
.scrollbar{
    width: 30px;
    height: 300px;
    margin: 0 auto;
 
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
        width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
        background: #EDEDED;
    }

效果如下如:

如果要改变滚动条的宽度:在::-webkit-scrollbar中改变即可;如果要改变滚动条滑块的圆角,在::-webkit-scrollbar-thumb 中改变;如果要改轨道的圆角在::-webkit-scrollbar-track中改变;

此外,滚动条的滑块不仅可以填充颜色还可以填充图片如下:

css代码:

.test-5::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.test-5::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    }
.test-5::-webkit-scrollbar-track {/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        /*border-radius: 10px;*/
        background: #EDEDED;
    }

html代码:

<div class="test test-5">
    <div class="scrollbar"></div>
</div>

效果如下:

以上就可以做出自己喜欢的滚动条了;

如果文档中会有多个滚动条出现,而且希望所有的滚动条样式是一样的,那么伪元素前面不需要加上class、id、标签名等之类的任何东西。

到此这篇关于CSS自定义滚动条样式案例详解的文章就介绍到这了,更多相关CSS自定义滚动条样式内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:vue页面引入three.js实现3d动画场景操作jQuery插件slicebox实现3D动画图片轮播切换特效带你了解CSS基础知识,样式利用CSS制作3D动画

  • 本文相关:
  • 最基本的几种css文字滤镜效果
  • 解决url中含有-与号-不符合标准问题
  • 全面考察“禁用浏览器后退”
  • 讨论css中的各类居中方式
  • css基础学习
  • 在线asc码查询
  • css将div内容垂直居中案例总结
  • 父div高度不能自适应子div高度的解决方案
  • 如何禁止打印页面
  • css重新定义项目符号和编号技巧
  • css怎样设置滚动条的颜色及样式
  • div+css 怎么实现滚动条样式?急!急!啊
  • css代码怎样改变火狐浏览器中滚动条样式
  • 用css怎么设置div滚动条的样式,可改变大小的
  • 我用CSS样式写一个DIV的滚动条,在火狐里被替换成默认滚动条...
  • 利用div+jquery自定义滚动条样式的2种方法
  • 利用div+jquery自定义滚动条样式的2种方法
  • 如何定义Select下拉框的边框颜色和滚动条样式
  • ie怎么自定义滚动条,我以为只有chrome可以 原来ie也行 css怎...
  • css+div 做的网页层要求浮动并随着滚动条的移动而移动 对不同...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页vue页面引入three.js实现3d动画场景操作jquery插件slicebox实现3d动画图片轮播切换特效带你了解css基础知识,样式利用css制作3d动画最基本的几种css文字滤镜效果解决url中含有-与号-不符合标准问题全面考察“禁用浏览器后退”讨论css中的各类居中方式css基础学习在线asc码查询css将div内容垂直居中案例总结父div高度不能自适应子div高度的解决方案如何禁止打印页面css重新定义项目符号和编号技巧漂亮的表格页面遮罩层,并且阻止页面body滚html清除浮动的6种方法示例相对路径与绝对路径的区别css绘制五角星css透明属性详解代码文字或图片元素在div中垂直居中纯css实现鼠标放上去改变文字内容css如何使div层居中css图文混排的几种方案word-wrap巧用css滤镜做图案文字元素水平居中方案全集不同版本ie使用不同css(css条件注释语句用解决url中含有-与号-不符合标准问题web标准字体常规定义css也能控制表格的交替颜色firefox样式表定义不支持cursor:hand在线asc码查询定义标题的最好方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved