你或许需要清理一下页面上的滚动条，试试这个吧最近做的项目用的一个基础样式实现，需求是不希望看到无关的滚动条出现，因为内容

废话不多说先上最终的效果图，再简单的讲一下逻辑

以上是最近做的项目用的一个基础样式实现，需求是不希望看到无关的滚动条出现，因为内容过多的情况下页面上会出现大量的滚动条，整体观感十分的混乱

简单描述一下css实现逻辑

.scroll-box {
    /* 这里设置了 超出后隐藏 字体颜色为透明 添加0.3秒的过渡动画 宽高交由实际情况设置不在这里做任何设置*/
    /* 小tip 滚动条滑块的box-shadow会跟随容器的color 做为默认值 */
    /* 动画也就带动了滚动条的box-shadow 的变化 */
    /* color 会影响滚动条的整体表现 */
    overflow: auto;
    color: rgba(0, 0, 0, 0);
    transition: color .3s;
}
.scroll-box:hover {
    /* 鼠标悬浮的时候会将字体颜色的透明度提升 */
    color: rgba(0, 0, 0, 0.2);
}

.scroll-box::-webkit-scrollbar {
    /* 设置轨道宽度 x、y轴都设置为 6px */
    width: 6px;
    height: 6px;
}

.scroll-box::-webkit-scrollbar-thumb {
    /* 设置滑块 出现圆角 并且使用内阴影覆盖 */
    border-radius: 6px;
    box-shadow: inset 0 0 0 10px;
}

.scroll-box>* {
    /* 这里要让下级的容器恢复初始的字体颜色 */
    color: initial;
}

以下是demo代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html,
        body,
        .layout {
            height: 100vh;
            width: 100vw;
            padding: 0;
            margin: 0;
        }

        .f-auto {
            flex: 1;
        }

        .f-row {
            display: flex;
            flex-direction: row;
        }

        .f-col {
            display: flex;
            flex-direction: column;
        }

        .side {
            width: 200px;
            border-right: 1px solid #bbb;
        }

        .header {
            border-bottom: 1px solid #bbb;
        }

        .side,
        .header {
            text-align: center;
            color: #bbb;
        }

        .view {
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
            align-items: center;
        }

        .view>* {
            padding: 1rem;
        }


        .a,
        .b,
        .c {
            height: 200px;
            width: 30%;
        }

        .d,
        .e,
        .f {
            height: 200px;
            width: 30%;
            white-space: nowrap;
        }


        /* 以上是无关代码 */
        .scroll-box {
            /* 这里设置了 超出后隐藏 字体颜色为透明 添加0.3秒的过渡动画 宽高交由实际情况设置不在这里做任何设置*/
            /* 小tip 滚动条滑块的box-shadow会跟随容器的color 做为默认值 */
            /* 动画也就带动了滚动条的box-shadow 的变化 */
            /* color 会影响滚动条的整体表现 */
            overflow: auto;
            color: rgba(0, 0, 0, 0);
            transition: color .3s;
        }

        .scroll-box:hover {
            /* 鼠标悬浮的时候会将字体颜色的透明度提升 */
            color: rgba(0, 0, 0, 0.2);
        }

        .scroll-box::-webkit-scrollbar {
            /* 设置轨道宽度 x、y轴都设置为 6px */
            width: 6px;
            height: 6px;
        }

        .scroll-box::-webkit-scrollbar-thumb {
            /* 设置滑块 出现圆角 并且使用内阴影覆盖 */
            border-radius: 6px;
            box-shadow: inset 0 0 0 10px;
        }

        .scroll-box>* {
            /* 这里要让下级的容器恢复初始的字体颜色 */
            color: initial;
        }
    </style>
</head>

<body>
    <div class="layout f-row">
        <div class="side">
            // 一些侧边栏的内容
        </div>
        <div class="content f-col f-auto">
            <div class="header">//一些头部的内容</div>
            <div class="view f-auto" id="view">
                <div class="scroll-box a" id="a">

                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    const view = document.querySelector('#view')
    const testStr = '<div> 测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行测试行 </div>'
    const getTestDom = (n) => new Array(n).fill(testStr).join('')
    const ids = ['a', 'b', 'c', 'd', 'e', 'f']
    view.innerHTML = ids.map(id => `<div class="scroll-box ${id}" id="${id}">${getTestDom(30)}</div>`).join('')
</script>