如何在彈層彈出時阻止底部滑動 最佳方案
????網(wǎng)上對這個問題的解答眾說紛紜组贺，總結(jié)來看原理就下面這幾種：
? ? ? ? 1.阻止body滾動的默認行為：
????????????在彈層彈出后給body添加onscroll事件(移動端阻止ontouchmove)，并通過preventDefault讓body不能滾動祖娘，這樣的優(yōu)點是代碼量少失尖，能達到一定的效果。但同時缺點也是顯而易見的渐苏，這樣的做法在彈層內(nèi)容不需要滾動的情況下可以使用掀潮，但是在彈層內(nèi)容也需要滾動的情況下就不行了。
? ? ? ? 2.body設(shè)置overflow:hidden:??
? ? ? ? ? ? 這種方法通過在彈層彈出后給body設(shè)置樣式height:100%;overflow:hidden,讓body無法滾動琼富，親測pc端可以仪吧，移動端不起作用(猜測是移動端瀏覽器的問題)，具體原因還請大神來解答鞠眉。如果不需要考慮移動端邑商，可以使用這種方法，代碼也很簡潔凡蚜。
? ? ? ? 3.body設(shè)置position:fixed :
? ? ? ? ? ? 在彈層彈出后給body設(shè)置position:fixed人断， pc端移動端都可以，但是會強制滾動到頁面頂部(因為此時body已經(jīng)不能滾動了朝蜘。scrollTop被重置為0)恶迈，這種方法是最接近完美的解決方法，所以完美的解決辦法就是這種方法的增強版。
? ? ? ? ?完美的解決方案：
????????????在將要彈出彈層時候記錄當前滾動的位置暇仲，將body設(shè)置為固定定位之后步做，再將實際顯示的區(qū)域(不想滾動的區(qū)域)最外層進行定位，并將top值設(shè)置為負的滾動位置值奈附，這樣就不會在彈出彈層之后回到頁面頂部全度，然后在彈層關(guān)閉后解除body的固定定位以及之前不想滾動區(qū)域的定位，并滾動到之前記錄的位置（設(shè)置scrollTop的值）斥滤。這樣就完美解決了彈出彈層后底部會滑動的問題将鸵，并且彈層內(nèi)容可滑動。
? ? ? ? ? ??
? ? 示例： 假如已經(jīng)滾動了500px 那么此時的代碼則是
<body style="position:fixed">
? ? <section style="position:fixed;top:-500px">
? ? ? ? <!-- 不想滾動的區(qū)域 -->
? ? </section>
? ? <section>? ? ? ?
? ?????? <!-- 彈層區(qū)域 -->
? ?? </section>?
?</body>
具體的邏輯代碼佑颇，如何操作dom結(jié)構(gòu)就不寫了顶掉， 大家應(yīng)該也會，只要理解了這個原理挑胸，不論是使用jq還是原生痒筒，使用vue或者react等的框架，都可以這樣解決彈層滑動問題茬贵。
