技術標籤：htmlcssjs

先說說我自己需求： 點選頂部選單按鈕會彈出選單選項，然後背景有一個遮罩效果，此時選單選項出現要求禁止頁面滾動，關閉才能繼續滾動

解決： 因為即使加了遮罩如果頁面高度大於手機高度預設還是可以滾動的，網上有很多解決方法，我也看過試過，有些還要計算已經滾動的高度，因為有個方法是禁用了會自動彈回頂部，大概網上方法有：

方法1：設定監聽事件，阻止預設事件行為
bug->遮罩彈出頁面自動置頂，需要計算滾動距離，煩
$("body").css({
　　position: "fixed",
　　width: "100%"
 

});
document.body.addEventListener("touchmove", bodyScroll, false);
function bodyScroll(event) {
　　event.preventDefault();
}

方法2：加這個
document.body.addEventListener("touchmove", bodyScroll, { passive: false });
function bodyScroll(event) {
　　event.preventDefault();
}
passive是幹嗎用的呢，設定該屬性的目的主要是為了在阻止事件預設行為導致的卡頓。等待監聽器的執行是耗時的，有些甚至耗時很明顯，這樣就會導致頁面卡頓。即便監聽器是個空函式，也會產生一定的卡頓，畢竟空函式的執行也會耗時。加上{
 
 passive: false }能防止頁面卡頓。

對比第一個，就不需要設定body樣式了
有個問題：移除事件移除不了，沒效果..

方法3.以後頁面佈局固定頂部儘量不用fixed,用abosulte
中間內容滾動就好，禁用html滾動，不適用我這裡

最後我自個想了想，解決問題還是得看源頭，就是滾動條怎麼來的，預設是受哪個元素控制的，之前一直以為是body, 其實是html元素，html設定100%高就沒有預設滾動條了呀

所以：這樣不就行了麼，親測有效啊，而且不用計算高度那些，美滋滋，暫時沒發現這樣會出什麼問題，所以我這樣做了。

   // 關閉選單去掉禁止
      $("html"
 
).css({
        overflow: "auto",
        height: 100%
        });
        // 禁止滾動
        $("html").css({
            overflow: "hidden",
             //height: 100%
        });
    }