配置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编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
什么是css原子化,有什么用?
Apr 24 HTML / CSS
CSS 鼠标选中文字后改变背景色的实现代码
May 21 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
source.php查看源文件
2006/12/09 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
js正则相关知识点专题
2018/05/10 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
寒假生活随笔
2015/08/15 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers