h5移动端如何才能禁止上滑时把整个页面拖动起来了

手指上滑的时候怎样才能禁止整个页面拖动起来?阻止body touchmove默认事件不行, 那样就不能上滑了.

查看完整描述

1 回答

Helenr

TA贡献1780条经验获得超3个赞

这是布局设计的问题不应该和滑动显示有关系底部都各种按钮（客服收藏加入购物车返回顶部）这些应该写成fixed 永远置于页面底部同时这些的z-index也应该高于你图文介绍最后页面主题内容也应该有一个min-height防止页面内容过少确保撑开页面

1 反对回复 2018-12-04

weixin_慕仰2345478
touchmove 也就是滑动过程中加一个 event.preventDefault()

回复 2020-11-12
weixin_慕仰2345478
var block = document.getElementById("block"); var oW,oH; // 绑定touchstart事件 block.addEventListener("touchstart", function(e) { console.log(e); var touches = e.touches[0]; oW = touches.clientX - block.offsetLeft; oH = touches.clientY - block.offsetTop; //阻止页面的滑动默认事件 document.addEventListener("touchmove",defaultEvent,false); },false) block.addEventListener("touchmove", function(e) { event.preventDefault() var touches = e.touches[0]; var oLeft = touches.clientX - oW; var oTop = touches.clientY - oH; if(oLeft < 0) { oLeft = 0; }else if(oLeft > document.documentElement.clientWidth - block.offsetWidth) { oLeft = (document.documentElement.clientWidth - block.offsetWidth); } block.style.left = oLeft + "px"; block.style.top = oTop + "px"; },false); block.addEventListener("touchend",function() { document.removeEventListener("touchmove",defaultEvent,false); },false); function defaultEvent(e) { e.preventDefault(); }

回复 2020-11-12

热搜