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

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

创新互联建站是一家专业提供婺城企业网站建设,专注与成都网站建设、成都做网站、H5高端网站建设、小程序制作等业务。10年已为婺城众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

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

::-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://bzwzjz.com/article/ccipdh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: app网站建设 重庆网站设计 网站建设推广 商城网站建设 成都企业网站建设 攀枝花网站设计 成都模版网站建设 重庆手机网站建设 成都网站设计公司 营销网站建设 成都网站设计 响应式网站建设 宜宾网站设计 成都网站设计 网站制作公司 手机网站建设套餐 成都网站建设 手机网站制作设计 高端网站建设 网站建设方案 成都营销网站制作 营销网站建设