解決iOS下input和fixed 問題

標籤：

在ios下如果頁面底部有fixed 元素當有input輸入框觸發鍵盤時fixed會浮動在頁面出現展示總是

解決方案有很多種，但是要根據實際需要更改

方法一、css解決（弊端：當有大面積input元素時會出現滑動不順暢問題）

//這裡給內容地區設定 position:absolute，並且設定一個距離fixed的底部距離

.main{

position:absolute; 

bottom:rem-calc(80px); //fixed元素的高度

top:0;

left:0;

width:100%;

}

方法二、js解決方案（弊端：每次input焦時間點事件時要執行一次）

.pos-rel {
position: relative;;
}

<script>

$(function() {
var isIOS = (/iphone|ipad/gi).test(navigator.appVersion);//判斷是不是ios系統

if (isIOS) {
$(‘.main’).on(‘focus’, ‘input’, function () {
$(‘.fixed-bottom’).addClass(‘pos-rel’);
}).on(‘focusout’, ‘input’, function () {
$(‘.fixed-bottom’).removeClass(‘pos-rel’);
});
}
});
</script>

當然還有其它的解決方案例如使用iscroll.js剛開始就用的這種解決方式，後來發現在input元素較多或是有click事件頁面引入iscroll.js會遇到各種坑不建議使用，當然也可以把fixed設定成absolute每次頁面滾動變化時重新計算，這種方式也非常的消耗資源

綜合以上還是覺得在帶有input元素的頁面盡量避免fixed元素的使用

解決iOS下input和fixed 問題