<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title</title> <style> html,body{width: 100%;height: 100%;overflow:hidden} *{ margin: 0;padding: 0} .main{width: 100%;height: 100%;position: relative;} .box{width: 300%;height: 100%;position: absolute; top:0;left: 0;background: yellowgreen} </style> </head> <body> <div class="main"> <div class="box"> <span>1111111111111111111111111111111111111111</span> <span>2222222222222222222222222222222222222222</span> <span>3333333333333333333333333333333333333</span> </div> </div> </body> <script> var main = document.getElementsByClassName('main')[0]; var box = document.getElementsByClassName('box')[0]; var x1 = 0; var boxOffsetLeft = 0; var off = 0; //触摸开始获取鼠标位置和元素距左边距离 main.addEventListener('touchstart', function (e) { off = 1; var e = e || event; x1 = e.touches[0].pageX; boxOffsetLeft = box.offsetLeft; }); main.addEventListener('touchend', function (e) { off = 0; }); main.addEventListener('touchmove', function (e) { var e = e || event; if (!off)return; var x2 = e.touches[0].pageX - x1;//鼠标滑动的距离 box.style.left = boxOffsetLeft + x2 + 'px';//元素根据鼠标滑动距离移动 if (box.style.left > 0 + 'px') { box.style.left = 0 + 'px'; //左边距离为0时不能往左滑动 } else if (box.offsetLeft < -2 * window.innerWidth) { box.style.left = -2 * window.innerWidth + 'px';//右边最后一屏不能继续滑动 } }); </script> </html>