首頁(yè) 猿問(wèn) h5移動(dòng)端...

h5移動(dòng)端如何才能禁止上滑時(shí)把整個(gè)頁(yè)面拖動(dòng)起來(lái)了

JavaScript

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

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

查看完整描述

1 回答

Helenr

TA貢獻(xiàn)1780條經(jīng)驗(yàn) 獲得超4個(gè)贊

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

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

weixin_慕仰2345478
touchmove 也就是滑動(dòng)過(guò)程中加一個(gè) 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; //阻止頁(yè)面的滑動(dòng)默認(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