实现移动端touch事件的横向滑动列表效果

<div id="common_wrap" class="common-wrap">
<h4 class="common-kit__h4">在区域内向左右滑动</h4>
<ul class="common-kit__list" id="mask" style="left:0px">
<li><a href="javascript:;">感冒药箱</a></li>
<li><a href="javascript:;">健胃消食药箱</a></li>
<li><a href="javascript:;">高血压药箱</a></li>
<li><a href="javascript:;">慢病控制药箱</a></li>
<li><a href="javascript:;">孕妇育儿药箱</a></li>
<li><a href="javascript:;">糖尿病药箱</a></li>
</ul>
</div>

*{
padding: 0;
margin: 0;
}
html,body{
width: 100%;
overflow: hidden;
}
.common-wrap{
width: 100%;
height: 105px;
border-bottom: 8px solid #eee;
}
.common-kit__h4{
font-size: 14px;
margin-top: 17px;
margin-left: 8px;
letter-spacing: 0.2px;
}
.common-kit{
width: 100%;
position: relative;
}
.common-kit__list{
width: 558px;
position: absolute;
margin-top: 10px;
height: 80px;
}
.common-kit__list li{
position: relative;
list-style: none;
width: 80px;
height: 80px;
background-color: #eee;
float: left;
margin-left: 13px;
}
.common-kit__list li a{
text-decoration: none;
font-size: 12px;
position: absolute;
top:50%;
transform:translateY(-50%);
text-align: center;
padding: 0px 12px;
}
.common-kit__list li:first-child{
margin-left: 8px;
}

function slidecommonkit(){var mask = document.getElementById('mask');
var common_kit__list=document.querySelector('.common-kit__list');
var startPosition, endPosition, deltaX, deltaY, moveLength;
var commonkitLeft; /*手指按下瞬间触发touchstart事件*/
mask.addEventListener('touchstart', function (e) {
commonkitLeft=parseInt(common_kit__list.style.left);
var touch = e.targetTouches[0]; //targetTouches位于当前DOM元素上的手指动作的列表
startPosition = { //取屏幕上第一个手指相对于页面的坐标
x: touch.pageX,
y: touch.pageY
}
}); /*手指移动触发touchmove事件*/
mask.addEventListener('touchmove', function (e) {
var touch = e.targetTouches[0];
endPosition = {
x: touch.pageX,
y: touch.pageY
} deltaX = endPosition.x - startPosition.x; //移动到最后的坐标x - 开始时的坐标x
moveLength = Math.abs(deltaX); //获得移动的x方向的距离 /*向左移动的函数*/
var swipeLeft=function(){
if( deltaX<(-30) ){ //这里以30作为判断是否触发、如果deltaX小于-30，说明向左移动 if(Math.abs(commonkitLeft)+moveLength > ( common_kit__list.offsetWidth-window.innerWidth ) ){ //判断临界值
common_kit__list.style.left=window.innerWidth-common_kit__list.offsetWidth+'px';
}else{
common_kit__list.style.left=commonkitLeft-moveLength+'px'; //上一次的left值-移动的距离（由于距离是正数，而向左移动left值是负数，所以用-）
}
}
}
swipeLeft(); //执行该函数 /*向右移动的函数*/
var swipeRight=function(){
if( deltaX>30 ){
/*主要是逻辑*/
if(commonkitLeft+moveLength > 0 ){
common_kit__list.style.left=0+'px';
}else{
common_kit__list.style.left=commonkitLeft+moveLength+'px';
}
}
}
swipeRight(); });};slidecommonkit();