彈窗中的坑，坑，坑

彈窗，無非就是一個遮罩加上一個彈窗體，需要時顯示，關閉時隱藏。但如果遇到的多了你會發現裡面的一些細節還是需要耐心處理，才能運行的更流暢，所以我覺得還是有必要隨手寫一個總結。

開發過程中最常見的彈窗類型，最簡單的是頁面只有一屏（無滾動條），彈窗無滾動條；第二種，頁面有滾動條，彈窗無滾動條；第三種頁面有滾動條，彈窗有滾動條。第四種頁面有滾動條，彈窗中有表單輸入。其中坑最多的還要屬有滾動條的情況以及彈窗有輸入框的情形，最近兩次遇到的問題都是再輸入狀態下滾動頁面或者在彈窗中輸入文字出現游標錯位飄逸的現象，追其根源是因為ios對position: fixed;的解析缺陷導致的，在ios上會出現這樣的問題，Android上則正常。

使用absolute實現fixed效果：

開發彈窗我們首先會想到使用fixed定位，無論頁面怎麼滾動，彈窗總會出現在屏幕中央。那麼個別機型就會偶現上述游標錯位問題（沒有測試同學低版本機型配合很難復現233），解決方案就是使用absolute來代替fixed。那麼問題來了，如果頁面無滾動條還好，頁面會固定在首屏中央。如果頁面超出一屏，當用戶滑動到頁面底部時召喚彈窗，彈窗還只是出現在原來首屏的位置，此時頁面已經滾動了十萬八千里，總不能讓用戶在用手指劃回去查看彈窗吧，這時候我們會想到幾個解決思路，首先嘗試，既然彈窗使用fixed行不通，我們可以對他的父級或者上兩級使用fixed。經過試驗這樣也是行不通的，畢竟fixed還存在，畢竟用戶還是會使用ios系統。這時可以換一種思路，完全摒棄fixed的想法而使用absolute，我們可以在用戶滑動完屏幕之後點擊按鈕的時候，通過計算屏幕滾動的高度動態改變彈窗體的top屬性，這樣無論頁面滾動了多少，彈窗總會出現在用戶視線之內，上代碼。

// 獲取頁面滾動高度 （無敵兼容寫法233） let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;// 屏幕高let screenH = window.screen.height;// 彈窗高度let tcH = window.getComputedStyle(this.$refs.signtc).height;// 彈窗高度去掉pxlet h = tcH.slice(0, tcH.length-2);//let t = 頁面滾動高度 + ((屏幕高-彈窗的高)/2); let t = scrollTop + ((screenH-h) / 2);// 確定topthis.top = t + px;

通過簡短的計算可以將彈窗定位到視線之內，那麼下一步重要的操作就是，

禁止底層頁面滾動：

這是所有彈窗都要面臨的問題，估計你們頭腦中已經浮現出無數種解決方案，如：阻止默認事件，使用e.preventDefault()；給底層頁面定住，添加fixed，top、left、bottom、right都為0等等...

圖樣圖森破，根據以往經歷，前者不但會把頁面的滾動禁止，也會將彈窗中的滾動給禁止掉，後者的缺點是將頁面瞬間定回到頁面頂部，只適用與1-1.5屏滾動的頁面，頁面太長會影響用戶體驗。目前個人認為更優雅一些的方案是：

// 彈窗彈起時document.body.style[overflow-y] = hidden// 彈窗收起時document.body.style[overflow-y] = auto;// 如果遮罩有問題，可以在touchmove時單獨給遮罩、document或window加上e.preventDefault();// 收起時解除xxx.unbind();...

當然，這不是唯一的，之前看過一些用黑科技解決的方案，過於繁瑣，可能適用的場景更多一些。

總結：

1.彈窗有輸入框時，摒棄fixed，使用absolute動態改變top值。

2.探索禁止底層滾動的方法。

實際開發中場景不同，問題也會不同，還會有很多稀奇古怪的細節問題會出現，還是實時收集為好。

如有疏漏求指正，歡迎吐槽~

推薦閱讀：