移動端web頁面使用position:fixed問題總結

時間 2019-12-02

標籤移動 web 頁面使用 position fixed 問題總結欄目無線简体版

原文原文鏈接

最近在作移動端，又涉及到了 fixed（固定位置定位）的問題，在使用fixed的過程當中，遇到了一些的問題，而且部分問題沒法找到較好的解決方案。下面是我在網上找到的一些解決方法，僅供參考：javascript

正常界面php

圖中被紅色選中區域爲 position:fixed 元素css

問題1：footer輸入框 focus 狀態，footer 被居中，而不是吸附在軟鍵盤上部。

測試環境：iPhone 4s&5 / iOS 6&7 / Safarihtml

問題2：頁面底部，footer輸入框失去焦點時，header定位出錯。當頁面有滾動動做時，header定位恢復正常。

測試環境：iPhone 4s&5 / ios 6&7 / Safarijava

操做步驟：一、頁面滾動到底部；二、選中底部輸入框，使輸入框進入focus狀態；三、點擊頁面其餘區域，使輸入框失去焦點；android

問題3：當頁面發生跳轉，再退回時，fixed區域消失，當內容得到焦點時，fixed區域才顯示。

測試環境：iPhone 4 / iOS 5 / Safari（其餘版本未發現此問題）ios

問題4：部分瀏覽器不支持 fixed。

測試環境：魅族MX2 / 自帶瀏覽器（MX2上QQ、UC瀏覽器支持fixed，魅族的系統近期有過升級，更新以後自帶瀏覽器就能夠支持fixed）web

解決辦法：使用 userAgent 檢測，若是是魅族MX2自帶瀏覽器則禁用 position:fixed，使用 position:relative 代替。
PS: iOS4 也是不支持 fixed 的。瀏覽器

問題5：在滾屏過程當中，fixed定位異常，touchend以後恢復正常。

測試環境：三星i9100(S2) / 自帶瀏覽器（QQ、UC瀏覽器正常）app

問題6：部分低版本Android對支持很差，video poster屬性設置的封面圖會遮擋fixed元素。

測試環境：摩托羅拉ME525+ / Android 2.3.4 / 自帶瀏覽器、QQ、UC瀏覽器

問題7： WP8下，QQ、UC瀏覽器滾動頁面時footer定位錯誤，會往上偏移，是因爲地址欄收起的緣故。

測試環境：Nokia Lumia920 / WP8 / UC、QQ（自帶瀏覽器正常）

發現iphone4/4s上面有問題，有輸入框的頁面，發現問題挺大的，後來針對特殊瀏覽器進行檢測：

function isSupportFixed() {
    var userAgent = window.navigator.userAgent, 
        ios = userAgent.match(/(iPad|iPhone|iPod)\s+OS\s([\d_\.]+)/),
        ios5below = ios && ios[2] && (parseInt(ios[2].replace(/_/g, ‘.‘), 10) < 5),
        operaMini = /Opera Mini/i.test(userAgent),
        body = document.body,
        div, isFixed;

    div = document.createElement(‘div‘);
    div.style.cssText = ‘display:none;position:fixed;z-index:100;‘;
    body.appendChild(div);
    isFixed = window.getComputedStyle(div).position != ‘fixed‘;//不支持fixed的會設置成absolute
    body.removeChild(div);
    div = null;

    return !!(isFixed || ios5below || operaMini);
}

在測試的時候發現某些android瀏覽器（華爲），在表單獲取焦點時，會出現崩潰現象

總結

在 android 手機下 fixed 表現要比 iOS 更好，軟鍵盤彈出時，不會影響fixed元素定位；
不要在 fixed 元素中使用 input / textarea 元素。

仍是保留以前的態度，依然不推薦在 Android下使用 iScroll。在開發項目時，能夠考慮分爲兩個版本：iOS下使用 iScroll的解決方案，Android下使用 position:fixed。

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

iOS下的 Fixed + Input BUG現象

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

<body class="layout-fixed">  <!-- fixed定位的頭部 -->  <header>   </header>   <!-- 能夠滾動的區域 -->  <main>  <!-- 內容在這裏... -->  </main>   <!-- fixed定位的底部 -->  <footer>  <input type="text" placeholder="Footer..."/>  <button class="submit">提交</button>  </footer> </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 {  margin-top: 50px;  margin-bottom: 34px;  height: 2000px }

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

fixed定位

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

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

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

這即是 iOS 上 fixed 元素和輸入框的 bug 。其中不只限於 type=text 的輸入框，凡是軟鍵盤（好比時間日期選擇、select 選擇等等）被喚起，都會遇到一樣地問題。

雖然 isScroll.js 能夠很好的解決 fixed 定位滾動的問題，可是不在萬不得已的狀況下，咱們儘可能嘗試一下不依賴第三方庫的佈局方案，以簡化實現方式。這裏拋磚引玉做爲參考。

解決思路：

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

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

<body class="layout-scroll-fixed">  <!-- fixed定位的頭部 -->  <header>   </header>   <!-- 能夠滾動的區域 -->  <main>  <div class="content">  <!-- 內容在這裏... -->  </div>  </main>   <!-- fixed定位的底部 -->  <footer>  <input type="text" placeholder="Footer..."/>  <button class="submit">提交</button>  </footer> </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定位

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

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

-webkit-overflow-scrolling: touch;

在 main 元素上加上該屬性，嗯，絲般順滑的感受又回來了！

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

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

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

Android 下佈局

談到了 iOS ，也來簡單說一下 Android 下的佈局吧。

在 Android2.3+ 中，由於不支持 overflow-scrolling ，所以部分瀏覽器內滾動會有不流暢的卡頓。可是目前發如今 body 上的滾動仍是很流暢的，所以使用第一種在 iOS 出現問題的 fixed 定位的佈局就能夠了。

若是須要考慮 Android2.3 如下系統，由於不支持 fixed 元素，因此依然要須要考慮使用 isScroll.js 來實現內部滾動。

其實在 fixed 和輸入框的問題上，基本思路就是： > 因爲 fixed 在軟鍵盤喚起後會失效，致使在頁面能夠滾動時，會跟隨頁面一塊兒滾動。所以若是頁面沒法滾動，那麼 fixed 元素即便失效，也不會滾動，也就不會出現 bug 了。

因此能夠在這個方面去考慮解決問題。

其餘的一些細節處理

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

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

fixed定位

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

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

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