开始的话

关于滚动条的隐藏，在这里选用了（layui）使用的方式做一次详细解释，并配上GIF图进行步骤说明

第一步写出代码

(建议直接复制，嘿嘿)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style type="text/css">

    .box {
      
      
        width: 100%;
    }

    .outer-box {
      
      
        margin: 50px auto;
        width: 300px;
        height: 500px;
        background-color: #00F7DE;

        overflow-x: hidden;
    }

    .scroll-box {
      
      
        width: 330px;
        height: 500px;
        background-color: #959595;
        opacity: .8;

        overflow-x: hidden;
    }

    .content {
      
      
        height: 1000px;
    }


</style>

<body>

<div class="box">
    <div class="outer-box">
        <div class="scroll-box">
            <div class="content">
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
                <div>aaaaa</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

第二步拆解之 outer-box

css中 .outer-box 的样式结构如下

.outer-box {
    
    
        margin: 50px auto; /* 居中，请忽略…… */
        width: 300px; /* 宽 */
        height: 500px; /* 高 */
        background-color: #00F7DE; /* 背景颜色 */

        overflow-x: hidden; /* 隐藏溢出的x轴部分 */
    }

其中起作用的则是 overflow-x 这一句。
我们将 overflow-x: hidden 注释掉看结果
拆解outer-box
很明显，内部的溢出连同滚动条一起被隐藏掉了。

第三步拆解之 scroll-box

css中 .scroll-box 的样式结构如下

.scroll-box {
    
    
        margin: 50px auto; /* 居中，请忽略…… */
        width: 330px; /* 宽(注意一下这里) */
        height: 500px; /* 高 */
        background-color: #00F7DE; /* 背景颜色 */
        opacity: .8 /* 透明度，请忽略…… */

        overflow-x: hidden; /* 隐藏溢出的x轴部分 */
    }