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

資訊專欄INFORMATION COLUMN

彈出層完美禁止頁面滾動

AprilJ / 1098人閱讀

摘要:頁面中經常會遇到彈出層的部件,當彈出層激活時覆蓋整個頁面,且背景部分不能滾動。

頁面中經常會遇到彈出層的部件,當彈出層激活時覆蓋整個頁面,且背景部分不能滾動。實現起來有以下要點:

彈出層position設置為fixed,四個定位錨點均設為0;

激活彈出層時給htmlbody設置overflow: hidden;;

以下是實踐:

codepen

為了讓徹底禁止滾動,還可以在mousewheeltouchmove事件(分別對應PC和移動端)中調用preventDefault()方法:

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

需要注意的是:chrome默認將touchmove事件視為passive,目的是提高用戶體驗,讓處理一般事件時頁面一樣可以滾動,所以addEventListener的第三個參數需設置為:

{
    passive:false
}
以面向對象的方式實現的結果:

codenpen

使用es6再次重構:

codenpen

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

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

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

相關文章

  • 出層完美禁止頁面滾動

    摘要:頁面中經常會遇到彈出層的部件,當彈出層激活時覆蓋整個頁面,且背景部分不能滾動。 頁面中經常會遇到彈出層的部件,當彈出層激活時覆蓋整個頁面,且背景部分不能滾動。實現起來有以下要點: 彈出層position設置為fixed,四個定位錨點均設為0; 激活彈出層時給html和body設置overflow: hidden;; 以下是實踐: codepen 為了讓徹底禁止滾動,還可以在mous...

    CntChen 評論0 收藏0
  • 出層完美禁止頁面滾動

    摘要:頁面中經常會遇到彈出層的部件,當彈出層激活時覆蓋整個頁面,且背景部分不能滾動。 頁面中經常會遇到彈出層的部件,當彈出層激活時覆蓋整個頁面,且背景部分不能滾動。實現起來有以下要點: 彈出層position設置為fixed,四個定位錨點均設為0; 激活彈出層時給html和body設置overflow: hidden;; 以下是實踐: codepen 為了讓徹底禁止滾動,還可以在mous...

    jsbintask 評論0 收藏0
  • 彈出遮罩層后,如何禁止底層頁面滾動

    摘要:但是,我們會發現,當彈出遮罩層后,底層的內容也是可以滾動,顯然這不是我們想要的效果,而這個問題就是小萌最近開發項目時遇到的問題。彈窗是一種常見的交互方式,而蒙層則是彈窗必不可少的元素,用于隔斷頁面與彈窗區塊,暫時阻斷頁面的交互。但是,我們會發現,當彈出遮罩層后,底層body的內容也是可以滾動,顯然這不是我們想要的效果,而這個問題就是小萌最近開發項目時遇到的問題。 一個小程序的項目,是用MPV...

    betacat 評論0 收藏0
  • 兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉,滾動穿透,禁止微信內置瀏覽器下拉網頁

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

    robin 評論0 收藏0
  • 兼容移動端 js彈出框實現微信禁止h5禁止網頁下拉,滾動穿透,禁止微信內置瀏覽器下拉網頁

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

    inapt 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<