彈出層完美禁止頁面滾動(dòng)

jsbintask 發(fā)布于2019-08-01 16:34 / 609人閱讀

摘要：頁面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁面，且背景部分不能滾動(dòng)。

頁面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁面，且背景部分不能滾動(dòng)。實(shí)現(xiàn)起來有以下要點(diǎn)：

彈出層position設(shè)置為fixed，四個(gè)定位錨點(diǎn)均設(shè)為0；

激活彈出層時(shí)給html和body設(shè)置overflow: hidden;；

以下是實(shí)踐：

codepen

為了讓徹底禁止?jié)L動(dòng)，還可以在mousewheel和touchmove事件（分別對(duì)應(yīng)PC和移動(dòng)端）中調(diào)用preventDefault()方法：

function forbidScroll(e) {
    e.preventDefault && e.preventDefault();
    e.returnValue = false;
    e.stopPropagation && e.stopPropagation();
    return false;
}

需要注意的是：chrome默認(rèn)將touchmove事件視為passive，目的是提高用戶體驗(yàn)，讓處理一般事件時(shí)頁面一樣可以滾動(dòng)，所以addEventListener的第三個(gè)參數(shù)需設(shè)置為：

{
    passive:false
}

以面向?qū)ο蟮姆绞綄?shí)現(xiàn)的結(jié)果：

codenpen

使用es6再次重構(gòu)：

codenpen

原文：http://codepen.io/zhaojun/pos...

云服務(wù)器 GPU云服務(wù)器彈出層 fancybox彈出層 frameset彈出層 html彈出層

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/50610.html

相關(guān)文章

彈出層完美禁止頁面滾動(dòng)

摘要：頁面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁面，且背景部分不能滾動(dòng)。頁面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁面，且背景部分不能滾動(dòng)。實(shí)現(xiàn)起來有以下要點(diǎn)：彈出層position設(shè)置為fixed，四個(gè)定位錨點(diǎn)均設(shè)為0；激活彈出層時(shí)給html和body設(shè)置overflow: hidden;；以下是實(shí)踐： codepen 為了讓徹底禁止?jié)L動(dòng)，還可以在mous...

CntChen 2019-08-29 12:17 評(píng)論0 收藏0
彈出層完美禁止頁面滾動(dòng)

摘要：頁面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁面，且背景部分不能滾動(dòng)。頁面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁面，且背景部分不能滾動(dòng)。實(shí)現(xiàn)起來有以下要點(diǎn)：彈出層position設(shè)置為fixed，四個(gè)定位錨點(diǎn)均設(shè)為0；激活彈出層時(shí)給html和body設(shè)置overflow: hidden;；以下是實(shí)踐： codepen 為了讓徹底禁止?jié)L動(dòng)，還可以在mous...

AprilJ 2019-08-20 15:19 評(píng)論0 收藏0
彈出遮罩層后，如何禁止底層頁面的滾動(dòng)

摘要：但是，我們會(huì)發(fā)現(xiàn)，當(dāng)彈出遮罩層后，底層的內(nèi)容也是可以滾動(dòng)，顯然這不是我們想要的效果，而這個(gè)問題就是小萌最近開發(fā)項(xiàng)目時(shí)遇到的問題。彈窗是一種常見的交互方式，而蒙層則是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，我們會(huì)發(fā)現(xiàn)，當(dāng)彈出遮罩層后，底層body的內(nèi)容也是可以滾動(dòng)，顯然這不是我們想要的效果，而這個(gè)問題就是小萌最近開發(fā)項(xiàng)目時(shí)遇到的問題。一個(gè)小程序的項(xiàng)目，是用MPV...

betacat 2019-04-23 13:24 評(píng)論0 收藏0
兼容移動(dòng)端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動(dòng)穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

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

robin 2019-08-30 15:56 評(píng)論0 收藏0
兼容移動(dòng)端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁下拉，滾動(dòng)穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁

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

inapt 2019-08-26 13:35 評(píng)論0 收藏0