好程序员教程之配置H5的滚动条样式示例代码-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

配置 H5的滚动条样式示例代码有不少的小伙伴在网上寻找,本篇文章 好程序员 小编和大家分享一下配置 H5的滚动条样式示例代码,希望对HTML5开发感兴趣的小伙伴有所帮助,下面我们一块来看一下吧:

创新互联建站是一家专注于成都做网站、成都网站建设、成都外贸网站建设和多线BGP机房的网络公司,有着丰富的建站经验和案例。

/  滚动条的滑轨背景颜色  /

::-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?


网站名称:好程序员教程之配置H5的滚动条样式示例代码
分享路径:http://kswsj.cn/article/gegiso.html

其他资讯