问题描述：页面滚动到上下边缘的时候，如果继续拖拽，会将整个View一起拖走，导致页面【露底】。
解决方案：判断拖拽方向以及是否为边缘来阻止touchmove事件，防止页面继续拖拽。
1、页面布局
<body> <main> <!-- 内容在这里... --> </main> <!-- fixed定位的底部 --> <footer id="J_footer"> <input type="text" placeholder="" id="J_f_input"/> <button id="J_f_submit">提交</button> </footer> <body>
2、js处理
// 防止内容区域滚到底后引起页面整体的滚动 var content = document.querySelector('main'); var startY; content.addEventListener('touchstart', function(e) { startY = e.touches[0].clientY; }); content.addEventListener('touchmove', function(e) { // 高位表示向上滚动 // 底位表示向下滚动 // 1容许 0禁止 var status = '11'; var ele = this; var currentY = e.touches[0].clientY; if (ele.scrollTop === 0) { // 如果内容小于容器则同时禁止上下滚动 status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01'; } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) { // 已经滚到底部了只能向上滚动 status = '10'; } if (status != '11') { // 判断当前的滚动方向 var direction = currentY - startY > 0 ? '10' : '01'; // 操作方向和当前允许状态求与运算，运算结果为0，就说明不允许该方向滚动，即禁止默认事件，阻止滚动 if (!(parseInt(status, 2) & parseInt(direction, 2))) { stopEvent(e); } } });