国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jsbintask / 559人閱讀

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

頁(yè)面中經(jīng)常會(huì)遇到彈出層的部件，當(dāng)彈出層激活時(shí)覆蓋整個(gè)頁(yè)面，且背景部分不能滾動(dòng)。實(shí)現(xiàn)起來(lái)有以下要點(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í)頁(yè)面一樣可以滾動(dòng)，所以addEventListener的第三個(gè)參數(shù)需設(shè)置為：

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

codenpen

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

codenpen

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/50610.html

相關(guān)文章

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

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

    CntChen 評(píng)論0 收藏0

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

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

    AprilJ 評(píng)論0 收藏0

  • 彈出遮罩層后，如何禁止底層頁(yè)面的滾動(dòng)

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

    betacat 評(píng)論0 收藏0

  • 兼容移動(dòng)端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁(yè)下拉，滾動(dòng)穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁(yè)

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

    robin 評(píng)論0 收藏0

  • 兼容移動(dòng)端 js彈出框?qū)崿F(xiàn)微信禁止h5禁止網(wǎng)頁(yè)下拉，滾動(dòng)穿透，禁止微信內(nèi)置瀏覽器下拉網(wǎng)頁(yè)

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

    inapt 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<