当前位置: 首页 > 工具软件 > Fixed Nav > 使用案例 >

ios fixed定位bug位置偏移

万俟渊
2023-12-01

本文主要介绍移动端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;  // 优化滚动效果
}
 类似资料: