移動端禁止遮罩層下面的頁面滑動

阿新 • • 發佈：2018-12-23

在移動端頁面上寫遮罩層，遮罩層又是可以滑動的，那麼遮罩層下面的頁面也會隨著使用者滑動遮罩層而滑動。

解決思路1：禁止touchmove的預設行為。所以想到的都是preventDefault()，然後阻止冒泡。這個太複雜了。（不推薦）

這個方法不推薦，推薦下面的方法

解決思路2：開啟遮罩層的時候，給遮罩層下面的頁面新增fixed，頁面就是固定的，沒辦法滑動了。（推薦）

在移動端頁面上寫遮罩層，遮罩層又是可以滑動的，那麼遮罩層下面的頁面也會隨著使用者滑動遮罩層而滑動。解決思路1：禁止touchmove的預設行為。所以想到的都是preventDefault()

防止 tel .get inter 背景圖 style 禁止 events poi 1. <script> const bodyHeight = document.documentElement.clien

在遮罩層新增 @touchmove.prevent 用法 <div v-show="ishow" class="fiex" @touchmove.prevent> <div @click="hide" class="hide"></div

一.CSS樣式 #loadingBg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:15000;display:none;} #loadingBg img{positio

彈窗是一種常見的互動方式，而蒙層則是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，我們會發現，當彈出遮罩層後，底層body的內容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發專案時遇到的問題。一個小程式的專案，是用MPVUE(一個使用 Vue.js

專案中加頂部蒙層，發現滑動時底部頁面內容會正常滾動，解決方案：直接在蒙層所在div上加@touchmove.prevent就好了如下：<div class="masktop" @touchmove.prevent></div>

個人github：https://github.com/qiilee 歡迎follow 在touchmove時禁用瀏覽器預設事件， document.addEventListener('touc

left 說了 -s 加載 jquer 其中 ges loading style 話不多說，先上代碼，其實還是比較簡單的 1 $("<div id=‘shade‘ style=‘opacity:0.85;background:white‘></div

lse ipad str oid 發現 hid 滾動條 touch roi 1 前言移動端網頁，發現ios平臺的iphone或者ipad，網頁可以上下左右移動，而Android版則不會。僅作為記錄使用。 2 代碼 var mo=function(e){e.prevent

頁面上有遮罩層，但是下面頁面過長，不允許頁面滑動~ 解決：@touchmove.prevent 移動端專案需要在首頁做一個彈出的遮罩層，上面是活動樣式，就是下面左邊的樣子但是首頁內容過長，遮罩層css寫了position:absolute ，100%的寬高之後，滾動後會內容部分不在遮罩

頁面遮罩層 <div id="pageloadingright" class="pageloadingright"> </div> <div id="pageloading" class="pageloading"> <d

在頁面中彈出層後。如果是彈出的頁面滾動到頂部 / 底部後。在拖動 body 也會一起跟著滾動 PC端解決方案：在蒙版層彈出時，加上這句程式碼： document.body.parentNode.style.overflow = "hidden"; //禁止橫豎向滾動條

首先，在編寫模態框時，div初始化時新增屬性 data-backdrop=“static” tableindex="-1"。 <div id="loading" class="modal" d

實現功能：點選Repeater資料表每行的某一個按鈕，彈出遮罩層顯示“資料獲取中，請稍後.....”，後臺進行資料獲取的操作，獲取完成後，彈出相應的訊息框。 ShowAbnoramlServer.aspx頁面相關程式碼(點選Repeater表“更新”按鈕，呼叫頭部Updat

1.頁面載入完成時彈出模態框：首先要在HTML中新增：aria-hidden="true" data-backdrop="static" $(function(){ $('.modal').mo

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "&

最近在開發過程中，遇到客戶提出移動端禁止頁面縮放和禁止長按選中複製等屬性，除在安卓/ios原生中加入相應許可權外，html5頁面也可以作相應的設定。 <meta content="width=device-width, initial-scale=1.0, maxim

在寫網站時經常出現載入中，遇到載入遮罩層的頁面。這是我自己寫的一個遮罩層頁面，記錄一下，以便檢視。如圖： HTML 原始碼 //載入的gif圖片和提示文字 <div class="liadloging"> <div class="ldl_

加阻止預設事件，阻止冒泡無濟於事。解決辦法： //設定 html,body{ height:100%; width:100%; overflow:hidden; } //