ios15 safari 页面滚动时点击弹框后按钮无响应事件

现象:ipad ios15 safari浏览器上,当页面滚动后,地址栏会自动隐藏,这时点击按钮显示一个模态框,模态框中的按钮点了后无响应

原因:ios15 safari新加功能页面滚动时自动隐藏地址栏,当页面滚动后,模态框使用了position: fixed; 进行定位,这时候地址栏又显示出来了,但此时的html大小是整体往上移了,也就是说被隐藏的地址栏使得模态框的最前面部分的区域整体高度变得向上移动,而与真实的模态框中的内容有一定距离,当我们点击模态框中的按钮或输入框后,表现就是没有反应。如果在按钮的位置向上一小段距离(大概是地址栏高度)的样子点击,就会触发按钮事件了。

对应方案:当模态框打开后,让它再次计算一次html的大小。就执行下面这段代码就可以,目的就是让页面再次计算一次大小,这时候就会按照最新的页面布局计算一次,让元素位置"归位"。

this.document.documentElement.scrollTop = this.document.documentElement.scrollTop;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值