直接上程式碼

css:

html {
    font-size: 100px;
}
.bottomPrizelist-in {
    float:left;
overflow-x:scroll;
overflow-y:hidden;
width: 3rem;
height: 2.6rem;
background: rgba(0, 255, 0, .3);
white-space:nowrap;
}
.bottomPrizelist-in>.prizeBox {
    width: 1.7rem;
height: 1.7rem;
margin-top: .5rem;
margin-left: .3
 
rem;
display: inline-block;
}
.bottomPrizelist-in>.prizeBox:last-child {
    margin-right: .3rem;
}
.bottomPrizelist-in>.prizeBox>img {
    width: 100%;
}
/*滾動條樣式*/
.bottomPrizelist-in::-webkit-scrollbar {/*滾動條整體樣式*/
width: .6rem;     /*高寬分別對應橫豎滾動條的尺寸*/
height: .04rem;
}
.bottomPrizelist-in::-webkit-scrollbar-thumb 
 
{/*滾動條裡面小方塊*/
border-radius: .05rem;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
background: greenyellow;
}
.bottomPrizelist-in::-webkit-scrollbar-track {/*滾動條裡面軌道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: #ccc;
}

html

<div class="bottomPrizelist-in">
<!--圖片隨意了-->
 
<div class="prizeBox"><img src="imgs/prize/lpa.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpb.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpc.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpd.png"> </div>
    <div class="prizeBox"><img src="imgs/prize/lpe.png"> </div>
</div>