通过css div 制作手机端 卡片左右滑动效果

最终效果，通过鼠标左右滑动，切换相对于的文章，如下：

 1.html代码如下：

    <div class="outer_div" >
        <div class="box_div" id="div-fzjg">
            <div class="box-content">
                <div class="box-content-name">标题1</div>
                <div class="box-li-circle"></div><div class="box-content-desc"> 内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111</div>
            </div>
            <div class="box-content">
                <div class="box-content-name">标题2</div>
                <div class="box-li-circle"></div><div class="box-content-desc">内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111内容1221111</div>
            </div>
            <div class="box-content">box3</div>
        </div>
    </div>
    <div style="text-align: center;">
        <div class="box-num-item add-item-style"></div>
        <div class="box-num-item"></div>
        <div class="box-num-item"></div>
    </div>

2.css代码布局如下：

    .outer_div {
        width: 100%;
        height: 1.62rem;
        overflow: hidden;
        padding-left: 0.17rem;
    }
    .outer_div .box_div {
        overflow-x: auto;
        white-space: nowrap;
        /* 元素之间不会有空隙 */
        font-size: 0;
        padding-bottom: 0.2rem;/* 通过子div的padding-bottom隐藏掉x轴的滚动条 */
    }
    .box_div .box-content {
        box-sizing: border-box;
        white-space: normal;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
        display: inline-block;
        margin-right: 0.2rem;
        width: 2.26rem;
        height: 1.62rem;
        background: #FFFFFF;
        box-shadow: 0rem 0rem 0.1rem 0.02rem rgb(207 207 207 / 25%);
        border-radius: 0.08rem 0.08rem 0.08rem 0.08rem;
        opacity: 1;
    }
    .box-content{
        background-image: url(/static/images/index/success/background-img.png);
        width: 2.36rem;
        height: 2.36rem;
        background-size: contain;
    }
    .box-content-desc{
        font-size: 0.1rem;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 0.16rem;
        -webkit-background-clip: text;
        margin-top: -0.03rem;
        margin-bottom: 0.21rem;
        margin-right: auto;
        -webkit-line-clamp: 8;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 1.9rem;
        transform: scale(0.85);
    }
    .box-content-name{
        width: 0.84rem;
        font-size: 0.14rem;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 0.16rem;
        -webkit-background-clip: text;
        margin-top: 0.18rem;
        margin-left: 0.32rem;
    }
    .box-li-circle{
        width: 0.08rem;
        height: 0.08rem;
        border-radius: 0.08rem;
        background: #FF6A00;
        opacity: 1;
        display: inline-block;
        float: left;
        margin-top: 0.1rem;
        margin-left: 0.16rem;
        margin-right: -0.06rem;
    }
    .box-num-item{
        width: 0.2rem;
        height: 0rem;
        opacity: 1;
        
        border: 0.01rem solid #FF6A00;
        display: inline-block;
        margin: 0 0.05rem;
    }
    .add-item-style{
        border: 0.01rem solid #5B5B5B;
    }

3.js代码如下，通过js去，实现左右滑动后的，标签显示的颜色切换：

<script>
    document.getElementById('div-fzjg').addEventListener('scroll', (e)=>{
    // e.target.scrollLeft 滚动条距离左边的距离（ps: 只有距离左边的和距离上面的距离，没有右边和下面的距离。）
    // e.target.clientWidth  客户端显示宽度，高度大概同理，当距离左边的长度等于滚动条长度减去显示宽度即滚动到了最右边
    if(e.target.scrollLeft < 90){
        $('.box-num-item').eq(0).addClass('add-item-style').siblings().removeClass('add-item-style');
    } else if(e.target.scrollLeft > 90 && e.target.scrollLeft < 300){
        $('.box-num-item').eq(1).addClass('add-item-style').siblings().removeClass('add-item-style');
    } else{
        $('.box-num-item').eq(2).addClass('add-item-style').siblings().removeClass('add-item-style');
    }
})
</script>