Taro 彈窗滾動穿透問題完美解決方案 兼容H5和小程序

最近在作公司的一個導遊導覽項目，框架用的是Taro@v3.0.21
期間在作一個播放列表彈框的時候，遇到了遮罩層滾動和彈窗內容滾動，會致使底層頁面內容滾動的問題
通過上網搜尋解決方法，和親自實踐，終於找到了能同時兼容H5和小程序的完美解決方案
固然期間也是踩了各類坑，網上的有些辦法根本沒起做用，因此決定本身來寫一篇，下面是解決辦法：

• 先說H5的，比較簡單，只須要經過彈窗的顯示狀態，來動態設置底層頁面最外層View的overflow屬性便可。當彈窗顯示的時候，document.body.style.overflow = 'hidden'; 當彈窗隱藏的時候，document.body.style.overflow = 'scroll';
• 因爲小程序沒有DOM結構，上面的方案天然是不起任何做用（就是這麼傲嬌）。小程序要分兩步來解決，先是mask蒙層會滑動穿透的問題，這個能夠採用Taro的catchMove屬性 來解決，官方文檔上也有說，見下方圖片。而後是彈窗內部滾動穿透的問題，採用的是將彈窗內部最外層View改成ScrollView，光這樣改還不行，還要在ScrollView的外層再加個View而且加上catchMove屬性。直接在ScrollView上面加catchMove不行，ScrollView不支持這個屬性。

注：Taro的CatchMove屬性是Taro 3.0.21版本纔開始支持

如上操做，Taro 彈窗滾動穿透問題的問題就完美解決了。可同時兼容H5和小程序。