纯css实现移动端横向滚动效果

最终效果

录制_2021_03_05_10_54_03_571.gif

这种效果在移动端挺常见的，实现也不复杂。不需要js，纯css就可以实现。

这种横排布局，内容超过屏幕宽度后，会出现滚动条，就像下面的图片展示的效果。

录制_2021_03_08_10_00_33_852.gif

我们可以使用css3的::-webkit-scrollbar，把元素的滚动条宽度设为0，是width，不是height哦，就实现了我们想要的效果。

录制_2021_03_08_10_07_55_850.gif

::-webkit-scrollbar仅仅支持WebKit内核的浏览器（如谷歌，苹果Safari）。它可以改变默认滚动条的样式，有兴趣的同学可以试下。

语法：
::-webkit-scrollbar — 整个滚动条.
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头).
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块.
::-webkit-scrollbar-track — 滚动条轨道.
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分.
::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分.
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

下面的是完整的项目代码。

html

<section>
        <ul class="book-type-wrapper">
            <li class="item">
                <label class="item-name">分类一</label>
                <ul class="sub-list">
                    <li class="sub-item active">全部</li>
                    <li class="sub-item">子类一</li>
                    <li class="sub-item">子类二</li>
                    <li class="sub-item">子类三</li>
                    <li class="sub-item">子类四</li>
                    <li class="sub-item">子类五</li>
                    <li class="sub-item">子类六</li>
                    <li class="sub-item">子类七</li>
                </ul>
            </li>
            <li class="item">
                <label class="item-name">分类二</label>
                <ul class="sub-list">
                    <li class="sub-item active">全部</li>
                    <li class="sub-item">子类一</li>
                    <li class="sub-item">子类二</li>
                    <li class="sub-item">子类三</li>
                    <li class="sub-item">子类四</li>
                    <li class="sub-item">子类五</li>
                    <li class="sub-item">子类六</li>
                    <li class="sub-item">子类七</li>
                </ul>
            </li>
            <li class="item">
                <label class="item-name">分类三</label>
                <ul class="sub-list">
                    <li class="sub-item active">全部</li>
                    <li class="sub-item">子类一</li>
                    <li class="sub-item">子类二</li>
                    <li class="sub-item">子类三</li>
                    <li class="sub-item">子类四</li>
                    <li class="sub-item">子类五</li>
                    <li class="sub-item">子类六</li>
                    <li class="sub-item">子类七</li>
                </ul>
            </li>
        </ul>
        <div class="img-list-wrapper">
            <ul class="img-list">
                <li class="item">
                    <img src="./imgs/bg-index-middle-1.jpg" alt="">
                    <div class="name">name</div>
                </li>
                <li class="item">
                    <img src="./imgs/bg-index-middle-2.jpg" alt="">
                    <div class="name">name</div>
                </li>
                <li class="item">
                    <img src="./imgs/bg-index-middle-3.jpg" alt="">
                    <div class="name">name</div>
                </li>
                <li class="item">
                    <img src="./imgs/bg-index-middle-4.jpg" alt="">
                    <div class="name">name</div>
                </li>
            </ul>
        </div>
    </section>

css

.book-type-wrapper {
        width: 100%;
        font-size: 13px;
        padding: 15px;
        margin: 0;
        background: white;
        display: block;
        box-sizing: border-box;

        .item {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            margin-bottom: 10px;

            .item-name {
                color: #999;
            }

            .sub-list {
                -webkit-box-flex: 1;
                overflow-x: scroll;
                white-space: nowrap;
                vertical-align: middle;
                height: 20px;
                margin: 0 0 0 5%;
                padding: 0;

                &::-webkit-scrollbar {
                    height: 0;
                    width: 0
                }

                .sub-item {
                    display: inline-block;
                    height: 18px;
                    line-height: 18px;
                    padding: 0 10px;

                    &.active {
                        background: #f0f0f0;
                        color: green;
                        border-radius: 20px;
                    }
                }
            }
        }
    }

    .img-list-wrapper {
        width: 100%;
        overflow-x: scroll;
        margin-top: 20px;
        padding: 0 20px;

        &::-webkit-scrollbar {
            width: 0
        }

        .img-list {
            padding: 0;
            margin: 0;
            display: block;
            width: 600px;

            .item {
                display: inline-block;

                &:not(:first-child) {
                    margin-left: 20px;
                }

                img {
                    width: 120px;
                    height: 100px;
                    display: block;
                    border-radius: 10px;
                }

                .name {
                    width: 100px;
                    text-align: center;
                    color: #646464;
                    font-size: 14px;
                    margin-top: 10px
                }
            }
        }
    }

动动小手，给我点个赞吧.png