css實現左右滑動

　　　　　　　　　　　　<div class="minVideoViewBox">
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                        <div class="miniStreamView"></div>
                    </div>

css

.minVideoViewBox{
    width:100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space:nowrap;
    &::-webkit-scrollbar{// 滾動條整體
        background:none;
    }
    &::-webkit-scrollbar-thumb{//滑塊
        background: rgba(71, 145, 242,.5);
        border-radius: 5px;
    }
    &::-webkit-scrollbar-track{//軌道

    }
    &::-webkit-scrollbar-button{//兩端按鈕

    }
    &::-webkit-scrollbar-track-piece{//滾動條中間部分
    }
}
.miniStreamView{
    width:80px;
    height:80px;
    display: inline-block;
    background:pink;
    margin:6px;
}

 

 

 

 

。