移动端h5商品横向列表ul li 左右滑动

#divscroller{
width:100%; 
max-width:2000px; //最大宽度
/*min-width:320px;*/
}
#divscroller .box123{
white-space: nowrap; //不允许换行
overflow-x: auto;   //x轴有超出部分显示滚动条
}
#divscroller .box123 li{
list-style: none;
        display: inline-block;  //行内块级元素
margin-bottom: 20px;
width: 250px;
}
.box123::-webkit-scrollbar{   //去除滚动条
width: 0;
height: 0;
display: none;
}

<div id="divscroller">

    <ul class="box123">
        <li>
    <img src="" width="250" height="180" style="margin: 20px 0 0 20px;"/><br />
    <span style="color: #777777;margin-left: 20px;font-size: 14px;">三高茶</span><br />
    <span style="color: red;margin-left: 20px;font-weight: bold;font-size: 18px;">￥456</span>
</li>
<li>
    <img src="" width="250" height="180" style="margin: 20px 0 0 20px;"/><br />
    <span style="color: #777777;margin-left: 20px;font-size: 14px;">三高茶</span><br />
    <span style="color: red;margin-left: 20px;font-weight: bold;font-size: 18px;">￥456</span>
</li>
<li>
    <img src="" width="250" height="180" style="margin: 20px 0 0 20px;"/><br />
    <span style="color: #777777;margin-left: 20px;font-size: 14px;">三高茶</span><br />
    <span style="color: red;margin-left: 20px;font-weight: bold;font-size: 18px;">￥456</span>
</li>
    </ul>
</div>
<script>
var u = navigator.userAgent;  
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端  
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端  
if(isAndroid&&isiOS){        /*注释5*/  
    $('.box123').on('touchstart',function(){  
    $(document).on('touchmove',function(e){  
        e.preventDefault();  
    });  
    $(document).on('touchend',function(){  
$(document).unbind();  
    });  
});  
    }  

</script>