2. 程式人生 > >【CSS-04】移動端蒙層底部頁面禁止滑動

【CSS-04】移動端蒙層底部頁面禁止滑動

阿新 • • 發佈：2018-12-31
//用$代替document.querySelector,節省重複程式碼； var $=function(selector){ return document.querySelector(selector); }; //彈出框程式碼 function show_popwindow(){ //頁面載入時，彈出框是隱藏的，當點選彈出按鈕時，彈出框彈出 document.getElementById("live-detail-popwindow").style.display = "block"; //下面的兩句是為了防止底部頁面滑動。注：必須對html和body都設定overflow:hidden，移動端才能禁止滑動
$('html').setAttribute("style","overflow:hidden;height:100%;"); $('body').setAttribute("style","overflow:hidden;height:100%;"); // pop window 的margin top //裝置的總高度 var height_total= document.documentElement.clientHeight; //container的高度 var popheight=$('#pop_container').offsetHeight; //top的值=（總高度-container高度）/2
var margin_top = (height_total-popheight) / 2; $('#pop_container').style.top=margin_top+"px"; } //視窗關閉時，pop-window需要隱藏，且body和html的overflow還原； function window_close(){ document.getElementById("live-detail-popwindow").style.display = "none"; $('html').setAttribute("style","overflow:auto;"
); $('body').setAttribute("style","overflow:auto;"); } </sctipt>

相關推薦

【CSS-04】移動端蒙層底部頁面禁止滑動

//用$代替document.querySelector,節省重複程式碼； var $=function(selector){ return document.querySelector(selector); }; //彈出框程式碼 function show_popwindow(){ //頁

【幹貨】移動端基礎知識技巧總結

|| 動作 pagex one mat 效果 .get 兼容性 ice 上個周周末，接手了一個移動端的(外包)小項目，一直著手於PC端，對移動端還是一知半解，所以這也是我的一個挑戰，因此，今天心血來潮，總結一些移動端的基礎知識和技巧供自己以後方便查閱，歡迎大家補充或轉載：

【案例一】移動端購物車基本功能實現，具體操作類似淘寶購車。

還是直接上圖：        這個效果圖很酷炫~  有個坑紀念下，本來想用jquery-weui做的，然後各種倒騰，還是用css+div，媽耶！ 關鍵核心的jquery語句控制： //繫結全選的按鈕，讓所有購物車都選中，然後計算總數 $("#checkboxSum

JQuery實現彈窗下底部頁面禁止滑動【轉載】

原文  http://blog.it985.com/22788.html 主題 jQuery 在專案開發過程中，經常會遇到帶有彈窗的頁面，尤其是在移動端。在沒有特別要求的情況下，彈窗彈出後，彈窗下的底部頁面依然能夠滑動。為了得到更好的使用者體驗，需要做到觸發彈窗

【css】移動端響應式佈局與響應式字型大小

前言：移動裝置（手機、平板電腦等），已經逐漸成為人們生活中必不可缺的物件了，這也意味著人們更多的用移動裝置瀏覽網頁。然而移動裝置有著各式各樣的解析度與大小，這使用前端開發人員不得不去設配它們。 前言二： 說到移動裝置，一個不得不提就是viewport的設定了 <

【css】移動端自適應佈局與字型大小自適應

一、vw, vh vw它是根據可視區的寬度來計算的。 vh它是根據可視區的高度來計算的。 <body> <style> body { margin:0; } .te

【圖片】移動端圖片上傳旋轉、壓縮的解決方案

dex adding .com pad 移動 side www shu add 移動端圖片上傳旋轉、壓縮的解決方案 來源 知乎 作者 林鑫 工作上有手機上傳準考證等圖片的功能，這個是非常必要的，作者寫的很全面，就直接記錄這個地址了 還有一篇 文件的上傳、下載

【筆記】移動端H5數字鍵盤input type=number的處理（IOS和Android）

!= 字符串 文檔 代碼 || clear tcl rfi 導致 在Vue中的項目，基於VUX-UI開發，一個常見的需求： 1、金額輸入框 2、彈出數字鍵盤 3、僅支持輸入兩位小數，限制最大11位數，不允許0開頭　　 第一，首先想到額就是在VUX-UI中制定ty

【轉載】移動端布局概念總結

準備工作 span spa ren bubuko 字體 就是 等於 開發 布局準備工作及布局思想及概念: 一個顯示器（pc端顯示器 及 手機屏顯示器），既有物理像素，又有獨立像素（獨立像素也叫作css像素，用於前端人員使用）； -->重要 首先確定設計稿的

【常見】移動端實例——圖片無縫滾動

+= get math view ack sta chan ole 寬度 <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta name

【移動端】移動端專案手機預覽方法

移動端專案，手機預覽方法： 環境要求：node安裝成功 第一步：開啟命令列工具                ① win + r    開啟windows執行視窗   &

【js每日一練】移動端滑屏互動

一、知識點1、em && rem && vw/vhem：根據當前樣式裡面定義的font-size大小來計算，如當前樣式裡面沒定義font-size，那麼就根據父級上的font-size大小來計算如：.box{font-size:20px; //此時1em=20pxheight:

【js每日一練】移動端滑屏交互

2.0 窗口大小 變化 當前 成了 ont 3.2 屏幕寬度 amp 一、知識點1、em && rem && vw/vhem：根據當前樣式裏面定義的font-size大小來計算，如當前樣式裏面沒定義font-size，那麽就根據父級上的fon

【vue】移動端通過cube-ui實現圖片上傳

「Pre」cube-ui的安裝 POST：https://blog.csdn.net/dangbai01_/article/details/84935882    一、普通上傳   <cube-upload  &nb

移動端滑屏全應用【四】移動端動畫貞動畫函式mTween封裝

首先此函式是基於大家都知道的Tween動畫演算法的，在此基礎上使用了三中講到的相容版動畫貞，可以使動畫變得更流暢。 1. 首先要記得引入Tween.js 2. 引入mTween.js 3. 呼叫 * mTwee.js檔案如下: （這裡的m意為mobile） (function(){

【解決】移動端裝置·橫豎屏時頁面內容字型大小調整的問題

首先判斷是不是橫豎屏導致的問題，所以要程式碼檢驗一下。 window.orientation 物件在手機上才可生效。 <script type="text/javascript"&g

【前端開發例項】移動端購物車左滑刪除 -（七）

Question. 問題 實現一個購物車中，左滑商品出現刪除按鈕的效果。 Solution. 解決 HTML文件部分： <ul class="cart-buy list" id="list"> <li class="cart

【轉載】移動端touch事件影響click事件以及在touchmove新增preventDefault導致頁面無法滾動的解決方法

原文地址：連結這兩天自己在寫一個手機網頁，用到了觸屏滑動的特效，就是往右滑動的時候左側隱藏的選單從左邊劃出來。做完之後在手機原生瀏覽器中執行正常，但在QQ和微信中開啟，發現touchmove只會觸發一次，而且touchend也經常不觸發。之後百度了一下這個問題，原因是主要是由

【原】移動端vue頁面點透事件 - 分析與解決

近期專案遇到了vue頁面事件被帶到下一個頁面的問題，也就是我們常說的點透事件，主要表現在android機器上，花了不少時間折騰，簡單做下總結~   vue頁面之間的切換通過Vue Router的router.push方法 b.vue之前已經訪問過，資料通過vuex管理，從a.vue進入到b

使用css 3實現 移動端 文本 點點的效果

ext overflow webkit wrap kit hidden -c pre idt { width: 200px; text-overflow: ellipsis; /*white-space: nowrap;*/ overflow: hi