問題：很多情況下，移動端的頁面並非只有一個頁面，也可能會存在多個頁面疊加的情況，比如巢狀路由，或者點選彈出一個新的頁面。

　　  底層的頁面是可以滾動的，一般覆蓋在上層的頁面一般會採用fixed固定定位（上層頁面也可能可以滾動），這個時候，當手指滑動上層頁面的時候，就會發生滾動穿透，會帶動底層的頁面滾動！！

解決方案1：

　　1. 定義一個固定body的方法，當要進入覆蓋在上層頁面的時候去呼叫

export function fixedBody() {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText 
 
+= `position:fixed;top:-${scrollTop}px;width:100%;overflow:hidden`;
}

　　2. 定義一個還原body的方法，當要離開覆蓋在上層頁面的時候去呼叫，進測試，就可以解決了移動端滾動穿透的問題

export function looseBody() {
    let body = document.body;
    body.style.position = '';
    let top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    document.body.style.cssText 
 
= ``;
    body.style.top = '';
}

解決方案2：

    可以使用better-scroll移動端滾動外掛去代替原生的滾動，也可以解決移動端滾動穿透的問題，具體使用可以參考官方文件。

     官方文件手冊: http://ustbhuangyi.github.io/better-scroll/doc/api.html

    npm better-scroll --save

     原生滾動條的缺點：

    1. 在真機上可以下拉回彈，有可能會看到裡面元素的內容

    2. 子級滾動條的滾動會帶動父級滾動條的滾動

    解決方法： 用better-scroll代替原生的滾動

    better-scroll使用方法：
    new BScroll(wrapper)

    使用注意點：1. 當內容DOM發生變化，高度或者寬度發生變化了，一定要重新呼叫一下refresh()方法！！

    2. better-scroll傳入的一個wrapper DOM物件，必須要設定一個高度或者寬度 例如100vh或者100vw, 要設定第一個滾動的子元素超出部分隱藏 overflow: hidden;

    3. better-scroll會選中wrapper下的第一個DOM元素，給其新增上一些滾動的樣式，因此，需要滾動的內容記憶體還需要一個元素包裹起來

   4. 使用better-scroll後，會阻止頁面元素上一些預設行為，比如a標籤的跳轉，以及a標籤按下啟用的樣式 a:active