Web移動端Fixed佈局的解決方案

時間 2019-12-13

標籤 web 移動 fixed 佈局解決方案欄目 HTML 简体版

原文原文鏈接

移動端業務開發，iOS 下常常會有 fixed 元素和輸入框(input 元素)同時存在的狀況。可是 fixed 元素在有軟鍵盤喚起的狀況下，會出現許多莫名其妙的問題。這篇文章裏就提供一個簡單的有輸入框狀況下的 fixed 佈局方案。
iOS下的 Fixed + Input BUG現象web

讓咱們先舉個栗子，最直觀的說明一下這個 BUG 的現象。常規的 fixed 佈局，可能使用以下佈局（如下僅示意代碼）：瀏覽器

 1 <body class="layout-fixed">
 2 <!-- fixed定位的頭部 -->
 3 <header>
 4 
 5 </header>
 6 
 7 <!-- 能夠滾動的區域 -->
 8 <main>
 9 <!-- 內容在這裏... -->
10 </main>
11 
12 <!-- fixed定位的底部 -->
13 <footer>
14 <input type="text" placeholder="Footer..."/>
15 <button class="submit">提交</button>
16 </footer>
17 </body>

對應的樣式以下：工具

 1 header, footer, main {
 2 display: block;
 3 }
 4 
 5 header {
 6 position: fixed;
 7 height: 50px;
 8 left: 0;
 9 right: 0;
10 top: 0;
11 }
12 
13 footer {
14 position: fixed;
15 height: 34px;
16 left: 0;
17 right: 0;
18 bottom: 0;
19 }
20 
21 main {
22 margin-top: 50px;
23 margin-bottom: 34px;
24 height: 2000px
25 }

而後看起來就是下面這個樣子。拖動頁面時 header 和 footer 已經定位在了對應的位置，目測沒問題了。佈局

但接下來問題就來了！若是底部輸入框軟鍵盤被喚起之後，再次滑動頁面，就會看到以下圖所示：測試

咱們看到 fixed 定位好的元素跟隨頁面滾動了起來… fixed 屬性失效了！ui

這是爲何呢？簡單解釋下： > 軟鍵盤喚起後，頁面的 fixed 元素將失效（即沒法浮動，也能夠理解爲變成了 absolute 定位），因此當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。this

這即是 iOS 上 fixed 元素和輸入框的 bug 。其中不只限於 type=text 的輸入框，凡是軟鍵盤（好比時間日期選擇、select 選擇等等）被喚起，都會遇到一樣地問題。
雖然 isScroll.js 能夠很好的解決 fixed 定位滾動的問題，可是不在萬不得已的狀況下，咱們儘可能嘗試一下不依賴第三方庫的佈局方案，以簡化實現方式。這裏拋磚引玉做爲參考。spa

解決思路：code

既然在 iOS 下因爲軟鍵盤喚出後，頁面 fixed 元素會失效，致使跟隨頁面一塊兒滾動，那麼假如——頁面不會過長出現滾動，那麼即使 fixed 元素失效，也沒法跟隨頁面滾動，也就不會出現上面的問題了。blog

那麼按照這個思路，若是使 fixed 元素的父級不出現滾動，而將原 body 滾動的區域域移到 main 內部，而 header 和 footer 的樣式不變，代碼以下：

 1 <body class="layout-scroll-fixed">
 2 <!-- fixed定位的頭部 -->
 3 <header>
 4 
 5 </header>
 6 
 7 <!-- 能夠滾動的區域 -->
 8 <main>
 9 <div class="content">
10 <!-- 內容在這裏... -->
11 </div>
12 </main>
13 
14 <!-- fixed定位的底部 -->
15 <footer>
16 <input type="text" placeholder="Footer..."/>
17 <button class="submit">提交</button>
18 </footer>
19 </body>

header, footer, main {
display: block;
}

header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}

main {
/* main絕對定位，進行內部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之能夠滾動 */
overflow-y: scroll;
}

main .content {
height: 2000px;
}

這樣再來看一下：

在原始輸入法下， fixed 元素能夠定位在頁面的正確位置。滾動頁面時，因爲滾動的是 main 內部的 div，所以 footer 沒有跟隨頁面滾動。

上面貌似解決了問題，可是若是在手機上實際測試一下，會發現 main 元素內的滾動很是不流暢，滑動的手指鬆開後，滾動馬上中止，失去了本來的流暢滾動特性。百度一下彈性滾動的問題，發如今 webkit 中，下面的屬性能夠恢復彈性滾動。在 main 元素上加上該屬性，嗯，絲般順滑的感受又回來了！

main {
/* main絕對定位，進行內部滾動 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之能夠滾動 */
overflow-y: scroll;
/* 增長該屬性，能夠增長彈性 */
-webkit-overflow-scrolling: touch;
}

另外，這裏的 header 和 footer 使用的是 fixed 定位，若是考慮到更老一些的 iOS 系統不支持 fixed 元素，徹底能夠把 fixed 替換成 absolute 。測試後效果是同樣的。

至此一個不依賴第三方庫的 fixed 佈局就完成了。

其餘的一些細節處理

在細節處理上，其實還有不少要注意的，挑幾個實際遇到比較大的問題來講一下：

有時候輸入框 focus 之後，會出現軟鍵盤遮擋輸入框的狀況，這時候能夠嘗試 input 元素的 scrollIntoView 進行修復。
在 iOS 下使用第三方輸入法時，輸入法在喚起常常會蓋住輸入框，只有在輸入了一條文字後，輸入框纔會浮出。目前也不知道有什麼好的辦法能讓喚起輸入框時正確顯示。這暫時算是 iOS 下的一個坑吧。
有些第三方瀏覽器底部的工具欄是浮在頁面之上的，所以底部 fixed 定位會被工具欄遮擋。解決辦法也比較簡單粗暴——適配不一樣的瀏覽器，調整 fixed 元素距離底部的距離。
最好將 header 和 footer 元素的 touchmove 事件禁止，以防止滾動在上面觸發了部分瀏覽器全屏模式切換，而致使頂部地址欄和底部工具欄遮擋住 header 和 footer 元素。
在頁面滾動到上下邊緣的時候，若是繼續拖拽會將整個 View 一塊兒拖拽走，致使頁面的「露底」。

爲了防止頁面露底，能夠在頁面拖拽到邊緣的時候，經過判斷拖拽方向以及是否爲邊緣來阻止 touchmove 事件，防止頁面繼續拖拽。

以上面內滾動 layout-scroll-fixed 佈局爲例，給出一段代碼做爲參考：

 1 // 防止內容區域滾到底後引發頁面總體的滾動
 2 var content = document.querySelector('main');
 3 var startY;
 4 
 5 content.addEventListener('touchstart', function (e) {
 6 startY = e.touches[0].clientY;
 7 });
 8 
 9 content.addEventListener('touchmove', function (e) {
10 // 高位表示向上滾動
11 // 底位表示向下滾動
12 // 1允許 0禁止
13 var status = '11';
14 var ele = this;
15 
16 var currentY = e.touches[0].clientY;
17 
18 if (ele.scrollTop === 0) {
19 // 若是內容小於容器則同時禁止上下滾動
20 status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
21 } else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
22 // 已經滾到底部了只能向上滾動
23 status = '10';
24 }
25 
26 if (status != '11') {
27 // 判斷當前的滾動方向
28 var direction = currentY - startY > 0 ? '10' : '01';
29 // 操做方向和當前容許狀態求與運算，運算結果爲0，就說明不容許該方向滾動，則禁止默認事件，阻止滾動
30 if (!(parseInt(status, 2) & parseInt(direction, 2))) {
31 stopEvent(e);
32 }
33 }
34 });