兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉，滾動穿透，禁止微信內置瀏覽器下拉網頁

inapt 發布于2019-08-26 13:35 / 3733人閱讀

摘要：彈出層觸發時候頁面設置為高度百分百將不能滾動設置的樣式為取消時候把樣式重置還原為最初彈出層遮罩層灰色區域點擊關閉遮罩層遮罩層阻止冒泡默認事件彈出層禁止頁面彈出框彈出時候市面下拉滾動監聽事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大盒

//彈出層觸發時候頁面設置為高度百分百將不能滾動設置body html的樣式為"overflow": "hidden","height":"100%"
//取消時候把樣式重置還原為最初"overflow": "visible","height":"100%"

    $("xxx").click(function(){
        $("彈出層").show();
        $("body, html").css({
            "overflow": "hidden",
            "height":"100%"
        })
    })
    //遮罩層灰色區域點擊關閉遮罩層
    $("遮罩層").click(function(e){
        e.stopPropagation();//阻止冒泡默認事件
        $("彈出層").hide();
        $("body, html").css({
            "overflow": "visible",
            "height":"100%"
        })
    })

//禁止h5頁面彈出框彈出時候市面下拉滾動監聽touchmove事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大div盒子取消阻止事件就能正常使用了

document.querySelector("body").addEventListener("touchmove", function(e) {
    if (!document.querySelector("你的div盒子").contains(e.target)){
            e.preventDefault();
    }
})

GPU云服務器云服務器 php 禁止微信 js彈框禁止滾動禁止訪問服務器網頁 html禁止穿透

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109094.html

兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉，滾動穿透，禁止微信內置瀏覽器下拉網頁

摘要：彈出層觸發時候頁面設置為高度百分百將不能滾動設置的樣式為取消時候把樣式重置還原為最初彈出層遮罩層灰色區域點擊關閉遮罩層遮罩層阻止冒泡默認事件彈出層禁止頁面彈出框彈出時候市面下拉滾動監聽事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大盒 //彈出層觸發時候頁面設置為高度百分百將不能滾動設置body html的樣式為overflow: hidden,height:100%//取消時...

robin 2019-08-30 15:56 評論0 收藏0
兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉，滾動穿透，禁止微信內置瀏覽器下拉網頁

摘要：彈出層觸發時候頁面設置為高度百分百將不能滾動設置的樣式為取消時候把樣式重置還原為最初彈出層遮罩層灰色區域點擊關閉遮罩層遮罩層阻止冒泡默認事件彈出層禁止頁面彈出框彈出時候市面下拉滾動監聽事件，這樣一來整個頁面將不能滾動所以添加一個判斷你的大盒 //彈出層觸發時候頁面設置為高度百分百將不能滾動設置body html的樣式為overflow: hidden,height:100%//取消時...

高璐 2019-08-02 14:30 評論0 收藏0
js實現微信禁止h5網頁下拉，禁止微信內置瀏覽器下拉網頁，附：demo

摘要：在微信里面打開的鏈接頁面如果沒有經過特殊處理，下拉的話，會出現這樣的情況大概就是一個深灰色的背景，還有一個源站的域名。在微信里面打開的鏈接頁面如果沒有經過特殊處理，下拉的話，會出現這樣的情況：showImg(https://segmentfault.com/img/bV37o1?w=750&h=1334); 大概就是一個深灰色的背景，還有一個源站的域名。本人覺得這個非常丑，并且有時...

whjin 2019-08-26 11:47 評論0 收藏0
H5項目常見問題匯總及解決方案

摘要：解決方案可以解決在手機上點擊事件的延遲的模塊，事件也是為了解決在的延遲問題顯示屏原理及設計方案說明屏是一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由個變為多個，如在同樣帶下的屏幕上，蘋果設備的顯示屏中，像素點個變為個。原文鏈接 - https://github.com/FrontEndRo... H5項目常見問題及注意事項 Meta基礎知識： H5頁面窗口自動調整到設備...

marser 2019-08-20 14:08 評論0 收藏0