头闻号

杨柳(个体经营)

化妆品包装|护肤膏霜|洗面奶|面膜|化妆品套装|其他皮肤用化学品

首页 > 新闻中心 > 科技常识:移动端调起软键盘导致 position:fixed 偏移
科技常识:移动端调起软键盘导致 position:fixed 偏移
发布时间:2024-12-24 11:20:23        浏览次数:6        返回列表

今天小编跟大家讲解下有关移动端调起软键盘导致 position:fixed 偏移 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关移动端调起软键盘导致 position:fixed 偏移 的相关资料,希望小伙伴们看了有所帮助。

1. 问题描述

app内打开H5页面,页面包含input输入框,点击input调起软键盘,输入完成点击下方提交按钮弹出toast时,会出现ttoast跳动的现象,其中:toast采用position: fixed进行固定定位

2. 分析原因关于position: fixed

首先来看,MDN 中对position: fixed的说明:

不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

注意到,position: fixed是相对屏幕视口(viewport)的位置来定位的。 那么toast跳动是否是因为viewport的改变呢?

关于viewport

MDN 中对viewport的说明:

@viewport 规则让我们可以对文档的大小进行设置viewport。这个特性主要被用于移动设备。 按百分比计算尺寸的时候,就是参照的初始视口(viewport)。初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话,一般是基于窗口大小。

在移动设备上(或者桌面浏览器的全屏模式),初始视口通常就是应用程序可以使用的屏幕部分。它可能是全屏或者减去由操作系统或者其它应用程序所占用的部分(例如状态栏)。

我们注意到,viewport是会随着操作系统或者应用程序占用而变化的,那是不是在调起软键盘的时候,改变了viewport呢

验证猜想

js 提供了Window.innerHeight方法,用来获取浏览器窗口的视口高度。经过验证,在调起软键盘时,确实改变了viewport,此时的视口高度是我们看到的可视屏幕高度-键盘高度, 所以我们看到的toast跳动是因为viewport的改变而导致。

3. 解决办法

通过绝对定位position: absolute来替代position: fixed

通常toast是直接插入到body元素下面的(当然可以是别的任何元素),即toast是body元素的直接子元素,因此,可以设置toast相对body元素进行绝对定位。

代码如下:

body { position: relative;}.toast { // 固定屏幕中间 position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}

4. 注意事项

在使用通过绝对定位position: absolute来替代position: fixed的解决方案时,如果top、left设置百分比,就需要注意设置绝对定位元素的offsetParent的height及width值。

因为,绝对定位是相对离它最近的position属性值不为static的父元素(即offsetParent)来进行定位,并且top、left设置百分比是以offsetParent的height和width来计算的。

比如上述动图中的例子,可以看到body的内容高度远远不到屏幕高度,因此想要实现toast在屏幕居中,就需要为body元素设置合理的高度(通过设置min-height或者height)。

上述例子的完整代码:

html{ height: 100%; // 设置html为浏览器窗口高度(不设100%的话,html 高度就等于body的高度)}body { position: relative; min-height: 600px; // 设置最小高度}.toast { // 固定屏幕中间 position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}offsetParent概念补充The htmlElement.offsetParent read-only property returns a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest td, th, table or the body is returned.

5. 总结

针对移动端调起软键盘导致position:fixed偏移的问题,可以通过绝对定位(position: absolute)替代固定定位(position:fixed)来曲线救国。 如果top、left设置百分比,则同时注意设置绝对定位元素的offsetParent的height和width值。

来源:爱蒂网