css横向、纵向滚动条
注意：(滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条⾼度，⽆法修改纵向滚动条⾼度、横向滚动条宽度数值只介绍Google浏览器滚动条样式，常⽤属性如下）
::-webkit-scrollbar滚动条整体样式
::-webkit-scrollbar-button⼀设置滚动条样式，滚动条两端的按钮图标就消失，但可以重新设置图⽚、新样式
::-webkit-scrollbar-track外层轨道
::-webkit-scrollbar-track-piece内层轨道，它会覆盖外层轨道 scrollbar-track 的样式
::-webkit-scrollbar-thumb滑块
::-webkit-scrollbar-thumb:hover滑块悬浮
::-webkit-scrollbar-thumb:vertical:hover纵向滑块悬浮
::-webkit-scrollbar-thumb:horizontal:hover横向滑块悬浮
::-webkit-scrollbar-corner 边⾓，两个滚动条交汇处
注意：(滚动条设置的width、height，分别是对应纵向滚动条宽度、横向滚动条⾼度，⽆法修改纵向滚动条⾼度、横向滚动条宽度数值)
1/* 1，滚动条 */
2::-webkit-scrollbar {
3    width: 20px;          /* 纵向滚动条宽度 */
4    height: 15px;        /* 横向滚动条⾼度 */
5    background: pink;    /* 整体背景 */
6    border-radius: 10px;  /* 整体圆⾓ */
7}
注意：滚动条两端的按钮也存在上述情况
1/* 2，滚动条两端的按钮 */
2::-webkit-scrollbar-button{
3    width: 30px;          /* 横向滚动条宽度 */
4    height: 20px;        /* 纵向滚动条⾼度 */
5    background: black;
6    border-radius: 10px;
7}
下图为⼀个实例，感兴趣的可以尝试，贴出源码
1<!DOCTYPE html>
2<html add="en">
3    <head>
4        <meta charset="UTF-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <meta http-equiv="X-UA-Compatible" content="ie=edge">
7        <title>Document</title>
8        <!-- 1. 导⼊Vue包 -->
9        <script src="/vue/2.2.2/vue.min.js"></script>
10        <style>
11            #app>div {
css设置表格滚动条
12                float: left;
13                width: 400px;
14                height: 400px;
15                margin-top: 100px;
16            }
17            .frame {
18                background: yellow;
19                position: relative;
20            }
21            .contentbox {
22                width: 100%;
23                height: 100%;
24                overflow-x: scroll;
25                overflow-y: scroll;
26                /*三⾓箭头的颜⾊*/
27                scrollbar-arrow-color: #bec5ca;
28                /*⽴体滚动条的颜⾊*/
29                scrollbar-face-color: #bec5ca;
30                /*⽴体滚动条亮边的颜⾊*/
31                scrollbar-3dlight-color: #bec5ca;
32                /*滚动条空⽩部分的颜⾊*/
33                scrollbar-highlight-color: #bec5ca;
34                /*⽴体滚动条阴影的颜⾊*/
35                scrollbar-shadow-color: #bec5ca;
36                /*⽴体滚动条强阴影的颜⾊*/
37                scrollbar-darkshadow-color: #bec5ca;
38                /*⽴体滚动条背景颜⾊*/
39                scrollbar-track-color: #e5e7eb;
40                /*滚动条的基本颜⾊*/
41                scrollbar-base-color: #e5e7eb;
42            }
43            .item {
44                width: 400px;
45                height: 200px;
46                background: green;
47                position: relative;
48                border: 1px solid blue;
49            }
50            /* 1，滚动条 */
51            ::-webkit-scrollbar {
52                width: 20px;
53                /* 纵向滚动条宽度 */
54                height: 15px;
55                /* 横向滚动条⾼度 */
56                background: pink;
57                /* 整体背景 */
58                border-radius: 10px;
59                /* 整体圆⾓ */
60            }
61            /* 2，滚动条两端的按钮 */
62            ::-webkit-scrollbar-button {
63                width: 30px;
64                /* 横向滚动条宽度 */
65                height: 20px;
66                /* 纵向滚动条⾼度 */
67                background: black;
68                border-radius: 10px;
70            /* 3，外层轨道 */
71            ::-webkit-scrollbar-track {
72                /* background: red; */
73                border-radius: 10px;
74            }
75            /* 4.内层轨道，它会覆盖外层轨道的样式。 */
76            ::-webkit-scrollbar-track-piece {
77                width: 5px;
78                background-color: red;
79                margin: 0 -2px 0;
80            }
81            /* 5，滑块 */
82            ::-webkit-scrollbar-thumb {
83                background: #bec5ca;
84                min-height: 50px;
85                min-width: 50px;
86                border-radius: 10px;
87            }
88            /* 纵向滑块悬浮 */
89            ::-webkit-scrollbar-thumb:vertical:hover {
90                background: yellow;
91            }
92            /* 横向滑块悬浮 */
93            ::-webkit-scrollbar-thumb:horizontal:hover {
94                background: pink
95            }
96            /* 6，边⾓，两个滚动条交汇处 */
97            ::-webkit-scrollbar-corner {
98                background: blue;
99            }
100        </style>
101    </head>
102    <body>
103        <!-- 2. 创建⼀个要控制的区域 -->
104        <div id="app">
105            <div class="frame" ref="frame">
106                <div class="memo">这是⼀个memo</div>
107                <div class="arrow" v-show="flag" ref="arrow"></div> 108                <div class="contentbox" ref="contentbox">
109                    <div class="item" v-for="(item,i) in list" :key="item.id"> 110                        <div class="title">{{item.title}}</div>
111                        <div class="content">{{t}}</div>
112                    </div>
113                </div>
114            </div>
115        </div>
116        <script>
117            var vm = new Vue({
118                el: '#app',
119                data: {
120                    list: [
121                        { id: '1', title: '标题1', content: '内容1' },
122                        { id: '2', title: '标题2', content: '内容2' },
123                        { id: '3', title: '标题3', content: '内容3' },
124                        { id: '4', title: '标题4', content: '内容4' },
125                        { id: '5', title: '标题5', content: '内容5' },
126                        { id: '6', title: '标题6', content: '内容6' }
127                    ],
128                },
129                mounted() {},
130                methods: {},
131            })
132        </script>
133    </body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。