臨近國慶，包車要上個活動中心的專案，也是就個活動長列表，裡面很多活動入口，每個活動都有自己的活動規則，如下圖：   這就會導致一個移動端極其噁心的問題也就是彈框滾動穿透，接下來就聊聊這個問題。   網上的文件大概可以分為三類：1：body { overflow: hidden }； 2：body { position:：fixed； top： 0 ； left：0 }；3： 阻止事件冒泡，也就是給彈框的蒙層加addEventListener(‘touchmove’, function(e){ e.preventDefault() })； 不得不吐糟的就是大部分人都是在貼上複製，根本沒有自己實際去操作過到底這幾種方法有沒有實際的作用。   先說第一種，這種方法在chrome瀏覽器的模擬器裡是可以的，但是手機上有問題，第二種在瀏覽器包括安卓手機也是可以的，但是ios不行，仍舊會穿透，第三種會把彈窗自己內部的滾動也禁用，很不友好，總結下來就是這三種方法都是有點問題的，而大部分人都是在抄別人的解決方案，自己根本不去實踐，不得不說這個技術氛圍真的是…無語。   我先是在GitHub上找了一個庫，star還不錯，說是相容所有裝置，可以再出現彈框等時候將body鎖住：

https://github.com/willmcpo/body-scroll-lock；   有興趣的可以去看下，這個我自己嘗試的是會出現在彈框消失的時候偶爾導致body還不能滾動，而且也是將彈框內部的滾動禁止掉了，對於我這種彈框內部的規則還需要滾動的也不是很合適。   而經過一天的研究之後還是選擇比較原始的方式，也就是彈框出現將蒙層的滾動時間禁掉，然後內部使用better-scroll重新初始化規則框的滾動，然後在彈框消失的時候將蒙層的滾動恢復，也就是讓body可以滾。程式碼如下：   下面是頁面dom   到這才算是真正解決了滾動穿透，這個問題在移動端很常見，因為我們需要很多模態框來進行互動，但是總的來說，市場上也有很多忽略這個問題的存在，也就是還有很多app遺留了這個滾動穿透的問題，這顯然不是很友好，雖然沒有影響到實際的功能，但是體驗很差，還有就是技術部落格跟風太多，貼上複製根本提高不了自己也幫不了別人。附上better-scroll的文件：

https://ustbhuangyi.github.io/better-scroll/#/examples/zh