PC端/移動端 禁止底層頁面滾動
在頁面中彈出層後。如果是彈出的頁面滾動到頂部 / 底部後。在拖動 body 也會一起跟著滾動
PC端解決方案:
在蒙版層彈出時,加上這句程式碼:
document.body.parentNode.style.overflow = "hidden"; //禁止橫豎向滾動條
在彈出層頁面關閉時:
document.body.parentNode.style.overflow = "auto"; //恢復橫豎向滾動條
移動端解決方法:
需要先新增一個函式,也可以不新增
function bodyScroll(e){ e.preventDefault(); //取消事件預設動作 e.stopPropagation(); //不再派發事件 }
在彈出層顯示時:
document.addEventListener("touchmove",bodyScroll,false);
在彈出層關閉時:
document.removeEventListener("touchmove",bodyScroll,false);
**THE END**
相關推薦
PC端/移動端 禁止底層頁面滾動
在頁面中彈出層後。如果是彈出的頁面滾動到頂部 / 底部後。在拖動 body 也會一起跟著滾動 PC端解決方案: 在蒙版層彈出時,加上這句程式碼: document.body.parentNode.style.overflow = "hidden"; //禁止橫豎向滾動條
純css實現水平無限滾動--適應PC和移動端
一、HTML <style type="text/css"> * { margin: 0; padding: 0; list-style: none;
react滾動條開發 適配PC 和 移動端的滾動 顯示隱藏header和footer/滾動顯隱公用元件
功能描述: 移動端時,上滾則顯示footer,下滾則隱藏footer PC端時,上滾則顯示header,下滾則隱藏header。 xx.js import React, { Component } from 'react'; import { BrowserR
同一個網址,根據pc跟移動端,跳到對應頁面
function goPAGE() { if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android |Mobile|BlackBerry|IEMobile|MQQBrowser|
電腦pc、移動端、平板不同客戶端,呼叫不同頁面或者樣式
js程式碼如下 / 判斷是否為移動端執行環境 // wukong.name 20130716 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)
bootstrap響應式相容PC和移動端圖片無縫滾動效果demo
效果如圖所示: js程式碼部分: /** * Created by Administrator on 2017/9/15. */ (function(){ var firstD
控制容器文字行數(pc和 移動端)
phone 行數 spa pre size 以及 :hover 框架 mx4 寫在前面的話: 對於文字的單行以及多行顯示,應該是經常用到的一個功能了,看下文吧~ pc 端: 1. 單行限制(兼容所有瀏覽器) 這裏加了一個 鼠標移入時顯示全部 的效果:
各主流瀏覽器(PC、移動端)userAgent屬性信息
ble 信息 ie 8 瀏覽器版本 實用 link row inux oppo PC: IE、QQ、chrome、firefox、360、safair 移動端:微信內置瀏覽器、QQ、獵豹、百度、UC、2345、系統自帶 PC: ie: Mozilla/5
pc端移動端拖拽實現
ack spa listen prev odi nth 獲取 lock top #div1 { width: 100px; height: 100px; background: red; position: absolute; }
JS判斷PC還是移動端打開網頁
不同 lag function mobile blog UNC and nav ray 最近在做移動端網站,也需兼容PC端。還沒找到更好的方法,只能用javascr判斷用戶是在PC端打開還是移動端打開。 JS判斷 var isPC = functi
JS判斷移動端還是PC、移動端px轉換成rem、移動端圓角
JS判斷移動端還是PC判斷PC還是移動if(/AppleWebKit.Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|L
PC端/移動端常見的兼容性問題總結
stc opacity 支持 縮小 view 功能 原因 border ext 移動端: ① 安卓瀏覽器看背景圖片,有些設備會模糊,原因是手機的分辨率太小 解決方案: 用2X圖片來代替img標簽,然後background-size: contain ② 防止手機中頁面放大或
APP快速開發:PC、移動端多項目整合,learun讓開發更暢快
進行 mysql 標準 mvc 解決 說了 配置 功能 整合 以前我們針對快速開發框架的PC模式進行過詳細的探討,了解到一套合適的快速開發框架對一個企業的重要性,今天我們繼續以learun框架為基礎藍本,探討一下其在APP快速開發中的作用。 learun技術支撐 (1)前臺
JAVA 判斷請求是PC還是移動端
/** * 判斷請求是PC 還是手機端 * @param requestHeader * @return */ &
淺談PC和移動端的自適應
做網頁時,我們通常需要考慮到不同電腦螢幕尺寸,以及不同手機螢幕大小等問題,解決樣式發生改變的情況,那麼如何解決呢?現在主要是採用自適應來解決高度,寬度的,以及圖片自適應問題,下面就PC端和移動端來總結一下,通常進行自適應高度和寬度,圖片時,一般與頁面的佈局存在關係。
彈出遮罩層後,如何禁止底層頁面的滾動【轉】
彈窗是一種常見的互動方式,而蒙層則是彈窗必不可少的元素,用於隔斷頁面與彈窗區塊,暫時阻斷頁面的互動。但是,我們會發現,當彈出遮罩層後,底層body的內容也是可以滾動,顯然這不是我們想要的效果,而這個問題就是小萌最近開發專案時遇到的問題。 一個小程式的專案,是用MPVUE(一個使用 Vue.js
dedecms中PC和移動端後臺後,圖片路徑處理
dedecms中PC和移動端共用一個後臺時,因為上傳圖片預設是PC端根目錄下的相對路徑,這樣對於移動端來說圖片路徑就不對了,所以需要把上傳的縮圖和文章中的圖片路徑進行處理: 一:新增函式,在輸出時進行替換: 開啟include目錄下的檔案extend.func.php,新增
PC或者移動端常用的上傳圖片
在開發app過程中我們遇到了這樣的需求,要求上傳身份證,評價晒圖,意見反饋晒圖等,還要可以單個上傳和多張上傳。要實現也不難,話不多少,直接上程式碼。 html <!DOCTYPE html> <html> <head> <m
一個判斷語句,區分當前裝置是PC還是移動端
親測有效: if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { window.location.href = "https://www.baidu.com/"; // 這是移動端 } else
PC和移動端瀏覽器同步測試工具Browsersync使用介紹
在移動端網頁開發中,總是因為不方便除錯,導致各種問題不容易被發現。但是現在有了Browsersync,一切都解決了。 不熟悉的同學可以看看Browsersync的官方網站Browsersync中文網。 五分鐘快速入門 1.使用Browsersync前需要安裝node.js。詳細的安裝過程可參見windows