css实现横向滚动条

发布时间：2025-12-09 11:48:09 浏览次数：1

注意:(滚动条设置的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,滚动条 */::-webkit-scrollbar {    width: 20px;          /* 纵向滚动条 宽度 */    height: 15px;         /* 横向滚动条 高度 */    background: pink;     /* 整体背景 */    border-radius: 10px;  /* 整体 圆角 */}

注意:滚动条两端的按钮也存在上述情况

/* 2,滚动条两端的按钮 */::-webkit-scrollbar-button{    width: 30px;          /* 横向滚动条 宽度 */    height: 20px;         /* 纵向滚动条 高度 */    background: black;    border-radius: 10px;}

下图为一个实例,感兴趣的可以尝试,贴出源码

<!DOCTYPE html><html add="en">    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta http-equiv="X-UA-Compatible" content="ie=edge">        <title>Document</title>        <!-- 1. 导入Vue包 -->        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>        <style>            #app>p {                float: left;                width: 400px;                height: 400px;                margin-top: 100px;            }            .frame {                background: yellow;                position: relative;            }            .contentbox {                width: 100%;                height: 100%;                overflow-x: scroll;                overflow-y: scroll;                /*三角箭头的颜色*/                scrollbar-arrow-color: #bec5ca;                /*立体滚动条的颜色*/                scrollbar-face-color: #bec5ca;                /*立体滚动条亮边的颜色*/                scrollbar-3dlight-color: #bec5ca;                /*滚动条空白部分的颜色*/                scrollbar-highlight-color: #bec5ca;                /*立体滚动条阴影的颜色*/                scrollbar-shadow-color: #bec5ca;                /*立体滚动条强阴影的颜色*/                scrollbar-darkshadow-color: #bec5ca;                /*立体滚动条背景颜色*/                scrollbar-track-color: #e5e7eb;                /*滚动条的基本颜色*/                scrollbar-base-color: #e5e7eb;            }            .item {                width: 400px;                height: 200px;                background: green;                position: relative;                border: 1px solid blue;            }            /* 1,滚动条 */            ::-webkit-scrollbar {                width: 20px;                /* 纵向滚动条 宽度 */                height: 15px;                /* 横向滚动条 高度 */                background: pink;                /* 整体背景 */                border-radius: 10px;                /* 整体 圆角 */            }            /* 2,滚动条两端的按钮 */            ::-webkit-scrollbar-button {                width: 30px;                /* 横向滚动条 宽度 */                height: 20px;                /* 纵向滚动条 高度 */                background: black;                border-radius: 10px;            }            /* 3,外层轨道 */            ::-webkit-scrollbar-track {                /* background: red; */                border-radius: 10px;            }            /* 4.内层轨道,它会覆盖外层轨道的样式。 */            ::-webkit-scrollbar-track-piece {                width: 5px;                background-color: red;                margin: 0 -2px 0;            }            /* 5,滑块 */            ::-webkit-scrollbar-thumb {                background: #bec5ca;                min-height: 50px;                min-width: 50px;                border-radius: 10px;            }            /* 纵向滑块悬浮 */            ::-webkit-scrollbar-thumb:vertical:hover {                background: yellow;            }            /* 横向滑块悬浮 */            ::-webkit-scrollbar-thumb:horizontal:hover {                background: pink            }            /* 6,边角,两个滚动条交汇处 */            ::-webkit-scrollbar-corner {                background: blue;            }        </style>    </head>    <body>        <!-- 2. 创建一个要控制的区域 -->        <p >            <p  ref="frame">                <p >这是一个memo</p>                <p  v-show="flag" ref="arrow"></p>                <p  ref="contentbox">                    <p  v-for="(item,i) in list" :key="item.id">                        <p >{    {item.title}}</p>                        <p >{    {item.content}}</p>                    </p>                </p>            </p>        </p>        <script>            var vm = new Vue({                el: '#app',                data: {                    list: [                        { id: '1', title: '标题1', content: '内容1' },                        { id: '2', title: '标题2', content: '内容2' },                        { id: '3', title: '标题3', content: '内容3' },                        { id: '4', title: '标题4', content: '内容4' },                        { id: '5', title: '标题5', content: '内容5' },                        { id: '6', title: '标题6', content: '内容6' }                    ],                },                mounted() {},                methods: {},            })        </script>    </body></html>

127724.html

横向滚动条样式

上一篇：微软编程教育都在搞什么?从code.org到makecode,从Minecraft到Micro 下一篇：漏洞挖掘技巧之利用javascript

知识问答

css实现横向滚动条

注意:(滚动条设置的width、height,分别是对应纵向滚动条宽度、横向滚动条高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常用属性如下)

注意:(滚动条设置的width、height,分别是对应纵向滚动条宽度、横向滚动条高度,无法修改纵向滚动条高度、横向滚动条宽度数值)

注意:滚动条两端的按钮也存在上述情况

下图为一个实例,感兴趣的可以尝试,贴出源码

综合百科

网站导航

知识问答

css实现横向滚动条

注意:(滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常用属性如下)

注意:(滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值)

注意:滚动条两端的按钮也存在上述情况

下图为一个实例,感兴趣的可以尝试,贴出源码

综合百科

网站导航

注意:(滚动条设置的width、height,分别是对应纵向滚动条宽度、横向滚动条高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常用属性如下)

注意:(滚动条设置的width、height,分别是对应纵向滚动条宽度、横向滚动条高度,无法修改纵向滚动条高度、横向滚动条宽度数值)