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

資訊專欄INFORMATION COLUMN

移動端滾動穿透問題完美解決方案

sewerganger / 2564人閱讀

摘要：問題眾所周知，移動端當有遮罩背景和彈出層時，在屏幕上滑動能夠滑動背景下面的內容，這就是著名的滾動穿透問題之前搜索了一圈，找到下面兩種方案之頁面彈出層上將添加到上，禁用和的滾動條但是這個方案有兩個缺點由于和的滾動條都被禁用，彈出層

問題

眾所周知，移動端當有 fixed 遮罩背景和彈出層時，在屏幕上滑動能夠滑動背景下面的內容，這就是著名的滾動穿透問題

之前搜索了一圈，找到下面兩種方案

css 之 overflow: hidden 
.modal-open {
  &, body {
    overflow: hidden;
    height: 100%;
  }
}

頁面彈出層上將 .modal-open 添加到 html 上，禁用 html 和 body 的滾動條
但是這個方案有兩個缺點：

由于 html 和 body的滾動條都被禁用，彈出層后頁面的滾動位置會丟失，需要用 js 來還原

頁面的背景還是能夠有滾的動的效果

js 之 touchmove + preventDefault 
modal.addEventListener("touchmove", function(e) {
  e.preventDefault();
}, false);

這樣用 js 阻止滾動后看起來效果不錯了，但是也有一個缺點：

彈出層里不能有其它需要滾動的內容（如大段文字需要固定高度，顯示滾動條也會被阻止）

上面兩個方案都有缺點，今天用英文關鍵字 google 了一下，才發現原來還有更好的方案

解決方案 position: fixed 
body.modal-open {
    position: fixed;
    width: 100%;
}

如果只是上面的 css，滾動條的位置同樣會丟失
所以如果需要保持滾動條的位置需要用 js 保存滾動條位置關閉的時候還原滾動位置

/**
  * ModalHelper helpers resolve the modal scrolling issue on mobile devices
  * https://github.com/twbs/bootstrap/issues/15852
  * requires document.scrollingElement polyfill https://uedsky.com/demo/src/polyfills/document.scrollingElement.js
  */
var ModalHelper = (function(bodyCls) {
  var scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + "px";
    },
    beforeClose: function() {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})("modal-open");

這樣上面3個缺點都解決了，至此滾動穿透就完美解決了

完整的示例

document.scrollingElement

因為瀏覽器獲取和設置 scrollTop 存在兼容性，為了簡化上面的示例，我直接使用了 document.scrollingElement 這個新標準，對于不支持的瀏覽器我寫了個 polyfill document.scrollingElement.js

參考

https://github.com/twbs/boots...

https://imququ.com/post/docum...

https://github.com/mathiasbyn...

https://segmentfault.com/q/10...

原文地址：https://uedsky.com/2016-06/mobile-modal-scroll/
獲取最佳閱讀體驗并參與討論，請訪問原文

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

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

相關文章

  • 滑動穿透(鎖body)終極探索

    摘要：場景當頁面出現浮層的時候，滑動浮層的內容，正常情況下預期應該是浮層下邊的內容不會滾動然而事實并非如此。當屬性的值為的時候，代表該監聽器內部不會調用函數來阻止默認滑動行為，瀏覽器稱這類型的監聽器為被動監聽器。 場景 當頁面出現浮層的時候，滑動浮層的內容，正常情況下預期應該是浮層下邊的內容不會滾動；然而事實并非如此。showImg(https://user-gold-cdn.xitu.io...

    Michael_Lin 評論0 收藏0

  • 滑動穿透(鎖body)終極探索

    摘要：場景當頁面出現浮層的時候，滑動浮層的內容，正常情況下預期應該是浮層下邊的內容不會滾動然而事實并非如此。當屬性的值為的時候，代表該監聽器內部不會調用函數來阻止默認滑動行為，瀏覽器稱這類型的監聽器為被動監聽器。 場景 當頁面出現浮層的時候，滑動浮層的內容，正常情況下預期應該是浮層下邊的內容不會滾動；然而事實并非如此。showImg(https://user-gold-cdn.xitu.io...

    RaoMeng 評論0 收藏0

  • 【前端詞典】滾動穿透問題的解決方案

    摘要：接下就說下我對滾動穿透問題解決方案探索的過程，希望對大家有點啟發。心想來了突然意識到寫彈窗的時候忘記處理滾動穿透的問題了。下期預告前端詞典繼承必懂知識點傳送門前端詞典代理的概念及其應用前端詞典滾動穿透問題的解決方案 背景 產品有三寶，彈窗，浮層加引導； 設計有三寶，透明，陰影加圓角； 運營有三寶，短信，推送加紅包； 程序員有一寶，這個做不了。 隨著移動端市場的份額越大，需求就越多...

    _Dreams 評論0 收藏0

  • 【前端詞典】滾動穿透問題的解決方案

    摘要：接下就說下我對滾動穿透問題解決方案探索的過程，希望對大家有點啟發。心想來了突然意識到寫彈窗的時候忘記處理滾動穿透的問題了。下期預告前端詞典繼承必懂知識點傳送門前端詞典代理的概念及其應用前端詞典滾動穿透問題的解決方案 背景 產品有三寶，彈窗，浮層加引導； 設計有三寶，透明，陰影加圓角； 運營有三寶，短信，推送加紅包； 程序員有一寶，這個做不了。 隨著移動端市場的份額越大，需求就越多...

    mzlogin 評論0 收藏0

發表評論

0條評論

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