移动端ios固定元素在底部，在页面产生滚动时失效？

Question

问题描述

一个contenteditable盒子，和一个普通的div，默认情况下，普通div固定在底部，edtiable盒子focus的时候，软键盘弹出，这个时候普通div固定就固定软键盘上方。

普通盒子设置定位为fixed，bottom为0，在安卓手机上能完美解决，但是ios端，软键盘会遮住div

问题出现的环境背景及自己尝试过哪些方法

针对ios端，监听了visualViewport的resize和scroll事件，让div的bottom的值等于
visualViewport的height，普通情况下div能固定在软键盘上，但是当edtiable盒子聚焦，页面向上滚动，就失效了。

相关代码

window.visualViewport?.addEventListener('resize', () => {
  const viewport = window.visualViewport
  div.style.bottom = viewport.height + 'px'
})

window.visualViewport?.addEventListener('scroll', () => {
  const viewport = window.visualViewport
  div.style.bottom = viewport.height + 'px'
})

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

之前有一个类似的文章，你可以借鉴一下 iphone 软键盘弹起，禁止页面整体往上滚动