给div加横向滚动栏，然后去修改滚动条的样式,以下只给chrome做了兼容。

直接上代码

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: .3rem;
    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>

兼容性是个问题，后续会做探讨，市面上有很多相关插件，大家也都可以拿来用。