css实现横向滚动条(css纵向滚动条)

全栈程序员站长

发布于 2022-07-25 19:45:52

7.5K0

发布于 2022-07-25 19:45:52

大家好，又见面了，我是你们的朋友全栈君。

注意：(滚动条设置的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>div {
                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. 创建一个要控制的区域 -->
        <div id="app">
            <div class="frame" ref="frame">
                <div class="memo">这是一个memo</div>
                <div class="arrow" v-show="flag" ref="arrow"></div>
                <div class="contentbox" ref="contentbox">
                    <div class="item" v-for="(item,i) in list" :key="item.id">
                        <div class="title">{
  
  {item.title}}</div>
                        <div class="content">{
  
  {item.content}}</div>
                    </div>
                </div>
            </div>
        </div>
        <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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/127724.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月1，如有侵权请联系 cloudcommunity@tencent.com 删除

html