H5禁止頁面滑動 滾動

2021-08-15 17:14:20 字數 657 閱讀 6389

禁止頁面滾動 有三種方法

1,依靠css 將頁面

document.documentelement.style.overflow='hidden';

document.body.style.overflow='hidden';//手機版設定這個。

如果設定了如上,頁面的滾動條將會消失,此時滑鼠滾輪失效。

但是 你用鍵盤的 上下左右鍵,你會發現,頁面仍然可以滾動。 別著急 往下看

2,在 1 的基礎上 新增 js功能

var move=function(e)

var keyfunc=function(e) }

document.body.οnkeydοwn=keyfunc;

好了 ,到了這裡,你會發現頁面木有任何問題了。滑鼠,鍵盤 都不能將頁面滾動。

不過....對於高階使用者來說,仍然有問題,比如 繼續往下看

3,假設使用者希望 滾動條 一直處於顯示狀態 腫麼辦捏???? ok ,繼續

var st

var scroll=function(e),5); }

window.οnscrοll=scroll;

上述** 可以似的 使用者的任何滾動操作,都將被還原。注意這個方式很消耗記憶體(雖然做了settimeout),但是誰讓需求比較二逼呢對吧~

感謝分享

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

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

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

pc上css控制滾動僅css overflow hidden 已足夠。但是,如果在mobile上還是可以拖動的!所以需要監聽touchmove事件。頁面禁止拖動 滾動 html,body css overflow hidden css height 100 document.body.addeven...

H5全屏滑動

移動web時代,學會做一些簡單h5頁面會很受用。比如最常見的活動營銷簡歷h5頁面是乙個全屏滾動頁面 fullpage 以下就是乙個簡單的例子。demo demo位址 新建乙個空的html5頁面,在head標籤裡面加入兩個meta標籤 就是這樣的乙個空的頁面了。body section h1.main...