好程序员教程之配置H5的滚动条样式示例代码

配置H5的滚动条样式示例代码有很多的小伙伴在网上寻找，本篇文章好程序员小编和你们分享一下配置H5的滚动条样式示例代码，但愿对HTML5开发感兴趣的小伙伴有所帮助，下面咱们一块来看一下吧：
/ 滚动条的滑轨背景颜色 /
::-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 {
}
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?
以上就是好程序员HTML5教程小编给你们分享的配置H5的滚动条样式示例代码。