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

資訊專(zhuān)欄INFORMATION COLUMN

移動(dòng)端滾動(dòng)穿透問(wèn)題完美解決方案

sewerganger / 2557人閱讀

摘要：?jiǎn)栴}眾所周知，移動(dòng)端當(dāng)有遮罩背景和彈出層時(shí)，在屏幕上滑動(dòng)能夠滑動(dòng)背景下面的內(nèi)容，這就是著名的滾動(dòng)穿透問(wèn)題之前搜索了一圈，找到下面兩種方案之頁(yè)面彈出層上將添加到上，禁用和的滾動(dòng)條但是這個(gè)方案有兩個(gè)缺點(diǎn)由于和的滾動(dòng)條都被禁用，彈出層

問(wèn)題

眾所周知，移動(dòng)端當(dāng)有 fixed 遮罩背景和彈出層時(shí)，在屏幕上滑動(dòng)能夠滑動(dòng)背景下面的內(nèi)容，這就是著名的滾動(dòng)穿透問(wèn)題

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

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

頁(yè)面彈出層上將 .modal-open 添加到 html 上，禁用 html 和 body 的滾動(dòng)條
但是這個(gè)方案有兩個(gè)缺點(diǎn)：

由于 html 和 body的滾動(dòng)條都被禁用，彈出層后頁(yè)面的滾動(dòng)位置會(huì)丟失，需要用 js 來(lái)還原

頁(yè)面的背景還是能夠有滾的動(dòng)的效果

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

這樣用 js 阻止?jié)L動(dòng)后看起來(lái)效果不錯(cuò)了，但是也有一個(gè)缺點(diǎn)：

彈出層里不能有其它需要滾動(dòng)的內(nèi)容（如大段文字需要固定高度，顯示滾動(dòng)條也會(huì)被阻止）

上面兩個(gè)方案都有缺點(diǎn)，今天用英文關(guān)鍵字 google 了一下，才發(fā)現(xiàn)原來(lái)還有更好的方案

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

如果只是上面的 css，滾動(dòng)條的位置同樣會(huì)丟失
所以如果需要保持滾動(dòng)條的位置需要用 js 保存滾動(dòng)條位置關(guān)閉的時(shí)候還原滾動(dòng)位置

/**
  * 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個(gè)缺點(diǎn)都解決了，至此滾動(dòng)穿透就完美解決了

完整的示例

document.scrollingElement

因?yàn)闉g覽器獲取和設(shè)置 scrollTop 存在兼容性，為了簡(jiǎn)化上面的示例，我直接使用了 document.scrollingElement 這個(gè)新標(biāo)準(zhǔn)，對(duì)于不支持的瀏覽器我寫(xiě)了個(gè) 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/
獲取最佳閱讀體驗(yàn)并參與討論，請(qǐng)?jiān)L問(wèn)原文

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

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

相關(guān)文章

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

    摘要：場(chǎng)景當(dāng)頁(yè)面出現(xiàn)浮層的時(shí)候，滑動(dòng)浮層的內(nèi)容，正常情況下預(yù)期應(yīng)該是浮層下邊的內(nèi)容不會(huì)滾動(dòng)然而事實(shí)并非如此。當(dāng)屬性的值為的時(shí)候，代表該監(jiān)聽(tīng)器內(nèi)部不會(huì)調(diào)用函數(shù)來(lái)阻止默認(rèn)滑動(dòng)行為，瀏覽器稱(chēng)這類(lèi)型的監(jiān)聽(tīng)器為被動(dòng)監(jiān)聽(tīng)器。 場(chǎng)景 當(dāng)頁(yè)面出現(xiàn)浮層的時(shí)候，滑動(dòng)浮層的內(nèi)容，正常情況下預(yù)期應(yīng)該是浮層下邊的內(nèi)容不會(huì)滾動(dòng)；然而事實(shí)并非如此。showImg(https://user-gold-cdn.xitu.io...

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

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

    摘要：場(chǎng)景當(dāng)頁(yè)面出現(xiàn)浮層的時(shí)候，滑動(dòng)浮層的內(nèi)容，正常情況下預(yù)期應(yīng)該是浮層下邊的內(nèi)容不會(huì)滾動(dòng)然而事實(shí)并非如此。當(dāng)屬性的值為的時(shí)候，代表該監(jiān)聽(tīng)器內(nèi)部不會(huì)調(diào)用函數(shù)來(lái)阻止默認(rèn)滑動(dòng)行為，瀏覽器稱(chēng)這類(lèi)型的監(jiān)聽(tīng)器為被動(dòng)監(jiān)聽(tīng)器。 場(chǎng)景 當(dāng)頁(yè)面出現(xiàn)浮層的時(shí)候，滑動(dòng)浮層的內(nèi)容，正常情況下預(yù)期應(yīng)該是浮層下邊的內(nèi)容不會(huì)滾動(dòng)；然而事實(shí)并非如此。showImg(https://user-gold-cdn.xitu.io...

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

  • 【前端詞典】滾動(dòng)穿透問(wèn)題的解決方案

    摘要：接下就說(shuō)下我對(duì)滾動(dòng)穿透問(wèn)題解決方案探索的過(guò)程，希望對(duì)大家有點(diǎn)啟發(fā)。心想來(lái)了突然意識(shí)到寫(xiě)彈窗的時(shí)候忘記處理滾動(dòng)穿透的問(wèn)題了。下期預(yù)告前端詞典繼承必懂知識(shí)點(diǎn)傳送門(mén)前端詞典代理的概念及其應(yīng)用前端詞典滾動(dòng)穿透問(wèn)題的解決方案 背景 產(chǎn)品有三寶，彈窗，浮層加引導(dǎo)； 設(shè)計(jì)有三寶，透明，陰影加圓角； 運(yùn)營(yíng)有三寶，短信，推送加紅包； 程序員有一寶，這個(gè)做不了。 隨著移動(dòng)端市場(chǎng)的份額越大，需求就越多...

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

  • 【前端詞典】滾動(dòng)穿透問(wèn)題的解決方案

    摘要：接下就說(shuō)下我對(duì)滾動(dòng)穿透問(wèn)題解決方案探索的過(guò)程，希望對(duì)大家有點(diǎn)啟發(fā)。心想來(lái)了突然意識(shí)到寫(xiě)彈窗的時(shí)候忘記處理滾動(dòng)穿透的問(wèn)題了。下期預(yù)告前端詞典繼承必懂知識(shí)點(diǎn)傳送門(mén)前端詞典代理的概念及其應(yīng)用前端詞典滾動(dòng)穿透問(wèn)題的解決方案 背景 產(chǎn)品有三寶，彈窗，浮層加引導(dǎo)； 設(shè)計(jì)有三寶，透明，陰影加圓角； 運(yùn)營(yíng)有三寶，短信，推送加紅包； 程序員有一寶，這個(gè)做不了。 隨著移動(dòng)端市場(chǎng)的份額越大，需求就越多...

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

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

0條評(píng)論

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