移動端禁止頁面拖動 h5禁止拖動頁面

2021-09-07 06:50:17 字數 580 閱讀 5236

pc上css控制滾動僅css("overflow","hidden")已足夠。

但是,如果在mobile上還是可以拖動的!所以需要監聽touchmove事件。

頁面禁止拖動、滾動:

$("html,body").css("overflow","hidden").css("height","100%");

document.body.addeventlistener('touchmove', self.welcomeshowedlistener, false);

恢復頁面拖動、滾動:

$("html,body").css("overflow","").css("height","");

document.body.removeeventlistener('touchmove', detail.welcomeshowedlistener, false);

參考:在移動端設定overflow:hidden為什麼頁面還能滾?要怎麼禁止

移動端的touch事件處理

addeventlistener()與removeeventlistener() 用法詳解

h5頁面禁止複製 H5移動端頁面禁止複製技巧

前言 業務需要,需要對整個頁面禁止彈出複製選單。在禁止的頁面中加入以下css樣式定義 webkit touch callout none 系統預設選單被禁用 webkit user select none webkit瀏覽器 khtml user select none 早起瀏覽器 moz user...

h5拖動總結

1.拖動神器sortablejs sortablejs 有vue,angular,react 版的實現 vue版 通過options 可以完全使用 sortable的配置 2.vue grid layout 拖動事件使用 interactjs 來實現的。可以實現在容器內拖動 自由碰撞,碰撞原理是 使...

H5禁止頁面滑動 滾動

禁止頁面滾動 有三種方法 1,依靠css 將頁面 document.documentelement.style.overflow hidden document.body.style.overflow hidden 手機版設定這個。如果設定了如上,頁面的滾動條將會消失,此時滑鼠滾輪失效。但是 你用鍵...