配置H5的滚动条样式


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来配置H5的滚动条样式的,配置H5的滚动条样式的注意事项有哪些,下面就是实战案例,一起来看一下。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

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

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

}

<p 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>

</p>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

阅读剩余部分

相关阅读 >>

HTML5是什么语言

HTML5多媒体audio和video详细介绍(二)

HTML5 details标签的作用是什么?<details>标签的使用方法介绍(附使用实例)

h5实现拖拉上传文件

HTML5实现下雪效果的实例代码分享

如何使用HTML5时钟实现(附代码)

HTML5中audio支持音频格式的解决方法

HTML5/css3 3d立方体旋转动画经典案例

用h5制作水滴特效教程

关于HTML5的知识小结

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...