X轴滚动-隐藏滚动条

当我们在编写移动端页面时通常会碰到页面的某一块会有横向滚动的区域

简化版本：

        页面结构：

                

    <div class="box">
        最大盒子
        <div class="box2">
            内部盒子横向滚动内容---内部盒子横向滚动内容---内部盒子横向滚动内容---内部盒子横向滚动内容---内部盒子横向滚动内容---内部盒子横向滚动内容---内部盒子横向滚动内容---内部盒子横向滚动内容
        </div>
    </div>

        如何使用CSS实现 横向滚动：

                

    body,
    html,
    .box {
        width: 100%;
        height: 100%;
        background-color: aqua;
    }

    .box {
        overflow: hidden;
    }

    .box2 {
        height: 100px;
        background-color: red;
        overflow-x: scroll;
    }

        此时会出现滚动条 导致页面不美观 我们将以下代码添加到样式表中 去除滚动条

    ::-webkit-scrollbar {
        display: none;
    }