問(wèn)題描述
問(wèn)題:手機(jī)H5頁(yè)面當(dāng)input輸入框獲取焦點(diǎn)時(shí),軟鍵盤會(huì)彈起,這時(shí):IOS底部固定定位的按鈕不會(huì)隨著鍵盤彈起而彈起产上;而安卓底部固定定位的按鈕會(huì)跟隨軟鍵盤彈起而頂起棵磷,從而遮擋一部分視圖
解決方法一、監(jiān)聽(tīng)window的resize事件晋涣,控制顯示隱藏
此方法只對(duì)安卓有用仪媒,iOS沒(méi)有監(jiān)聽(tīng)window的resize事件(iOS的話還是用flex布局比較好)
// 獲取視圖原始高度
let screenHeight = document.body.offsetHeight
// 為window綁定resize事件
window.onresize = function () {
let changeHeight = document.body.offsetHeight
if (changeHeight < screenHeight) {
// 隱藏被彈起的固定定位
} else {
// 顯示
}
}
解決方法二、flex布局
將屏幕分為上下兩部分谢鹊,主體為一部分算吩,底部一部分,主體部分設(shè)置為flex:1,overflow: scroll;內(nèi)容在主體內(nèi)滑動(dòng)佃扼,底部固定不動(dòng)
//樣式
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
//需要滑動(dòng)的主體內(nèi)容設(shè)置為flex:1;overflow: scroll,這樣當(dāng)內(nèi)容超出時(shí)只會(huì)在主體內(nèi)滑動(dòng)赌莺,而不會(huì)被底部固定的部分影響
.main {
flex:1;
width: 100%;
background-color:pink;
overflow: scroll;
}
//需要固定不動(dòng)的部分設(shè)置固定的高,
.foot {
height: 200px;
width: 100%;
background-color: #000;
}
//結(jié)構(gòu)
<div class="container">
<div class="main">
<p>dsadasdsadsadsadasdsadasdsadasdsaddsadasdsadsadsadasdsadasdsadasdsad</p>
</div>
<div class="foot">
</div>
</div>