配置H5的滚动条样式的示例代码


Posted in HTML / CSS onMarch 09, 2018

本文介绍了配置H5的滚动条样式的示例代码,分享给大家,具体如下:

/* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-track {
    background-color: #b46868;
}

/* 滑块颜色 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
} 

/* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-button {
    background-color: #7c2929;
}

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */
::-webkit-scrollbar-corner {
    background-color: black;
} 

// IE 自己的设置方法,并且是第一个可以自定义滚动条的浏览器,从IE5.5开始兼容
body {
    scrollbar-face-color: #b46868;
}
举例
/* Document scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Scrollable element */
.some-element::webkit-scrollbar {
}

<div class="custom-scrollbar">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. 
      Iure id exercitationem nulla qui repellat laborum vitae, 
      molestias tempora velit natus. Quas, assumenda nisi. 
      Quisquam enim qui iure, consequatur velit sit?
    </p>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
详解CSS3中Media Queries的相关使用
Jul 17 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 #HTML / CSS
详解px单位html5响应式方案
Mar 08 #HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 #HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 #HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 #HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 #HTML / CSS
You might like
第九节 绑定 [9]
2006/10/09 PHP
PHP脚本的10个技巧(5)
2006/10/09 PHP
一个更简单的无限级分类菜单代码
2007/01/16 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
2020/12/30 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
探究python中open函数的使用
2016/03/01 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
C#面试题问题集
2016/04/02 面试题
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
万能检讨书
2015/01/27 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
总结几个非常实用的Python库
2021/06/26 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏