首頁猿問 h5移動端...

h5移動端如何才能禁止上滑時把整個頁面拖動起來了

JavaScript

森林海 2018-11-14 13:11:55

手指上滑的時候怎樣才能禁止整個頁面拖動起來?阻止body touchmove默認(rèn)事件不行, 那樣就不能上滑了.

查看完整描述

1 回答

Helenr

TA貢獻1780條經(jīng)驗獲得超4個贊

這是布局設(shè)計的問題不應(yīng)該和滑動顯示有關(guān)系底部都各種按鈕（客服收藏加入購物車返回頂部）這些應(yīng)該寫成fixed 永遠(yuǎn)置于頁面底部同時這些的z-index也應(yīng)該高于你圖文介紹最后頁面主題內(nèi)容也應(yīng)該有一個min-height防止頁面內(nèi)容過少確保撐開頁面

1 反對回復(fù) 2018-12-04

weixin_慕仰2345478
touchmove 也就是滑動過程中加一個 event.preventDefault()

回復(fù) 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; //阻止頁面的滑動默認(rèn)事件 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(); }

回復(fù) 2020-11-12