先來了解我做的一個小專案要求，移動端的一個側邊欄，裡面有眾多選項可點選選擇，然後它的寬度不是佔滿整個視窗，可以點選首頁某個按鈕彈出來。
做這個東西，我一開始想到是用絕對定位來模擬個側邊欄，但很快就否定掉，首頁不是固定著螢幕的，可以滾動下滑。然後首頁下滑側邊欄也跟著變動位置，所以就用固定定位。
但是固定定位似乎有個毛病，彈出來的側邊欄裡，你手指做出滾動的動作，側邊欄背後的首頁也跟著滾動，這個現象當時覺得很不可思議，我在側邊欄裡滾動為什麼整個頁面都在滾。
於是就網上搜了下，嗯~ o（*￣▽￣*）o！這叫“滾動穿透”，我不知道這詞哪來的，這種現象描述為：
移動端當有 fixed 遮罩背景和彈出層時，在螢幕上滑動能夠滑動背景下面的內容，這就是著名的滾動穿透問題
解決的方法，網上也挺多的，大體上就是兩種，一種使用JS阻止滾動，一種使
元素固定位置：JS可以監聽touchmove事件來阻止滾動行為，這方法沒用過，感覺副作用會很大，也麻煩，大概是這樣：
modal。addEventListener（‘touchmove’， function（e） {
e。preventDefault（）；
}， false）；
固定body元素的解決思路有兩種，一種是給body新增overflow：hidden屬性和給高度，一種是給body元素新增position：fixed。這兩種都有缺陷，前面一種因為溢位吟唱的原因我覺得侷限性有點大，在某些特定情況用用還差不多。後面一種還可以，我這裡就只簡單說一下後面那種得解決思路。
如果直接給
元素新增固定元素，那樣是更麻煩得，最好是在開啟側邊欄的時候再新增上，關閉側邊欄的時候再去掉。這就得靠JS操作了，你可以先預定好一個類名作為切換：body。model-open{
position：fixed；
}
這樣就解決掉滾動穿透的問題，但是它有個不好的地方，就是每次開啟側邊欄，在首頁滾動的高度記錄會消失掉，頁面又回到最頂部。如果你做的東西需要這個記錄著當前高度的設定，那麼還要用JS來記錄下側邊欄彈出前頁面的高度，然後用JS來還原本來滾動的高度。這裡我沒有做相關地操作，很難說其中會踩到什麼坑，這裡有一篇他人寫的完善方案，也可以哪來借鑑下：
還有，如果覺得JS操作都嫌麻煩的，我這裡有一個更簡單，簡單得像迷一樣得答案：
反正我看不懂··········································
