本文主要介紹移動端input獲取焦點時,IOS固定定位fixed失效,位置偏移。
一、場景描述
移動端ios下,input獲取焦點時,固定定位的fixed會轉化爲absoult屬性,滾動條滾動超過可視區域,導致位置偏移。
二、解決方案
2.1將fixed的定位與滾動區域分離成2個部分
2.2滾動區域做absoult佈局
三、CSS代碼
.nav-wrapper{ // 頂部fixed佈局
}
.search-wrapper{ // 滾動區域的代碼
position: absolute;
left: 0;
top: 88px;
right: 0;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch; // 優化滾動效果
}