html 防止固定元素在移动的浏览器UI收缩或展开时移动

5ssjco0h  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(162)

我正面临着一个在移动的网页中使用固定元素的挑战,我需要它保持静态,而不管移动的浏览器的UI大小如何变化。

问题:

元素的样式为position: fixedheight: 100lvh
在移动的上,当浏览器UI(如地址栏)隐藏或显示时,此元素会向上移动其位置,这是我想避免的。
即使移动的浏览器UI收缩或展开,固定元素也应该保持不动。
下面是我想要的行为的图像:

在图像中,注意固定元素如何随着UI的变化而调整其位置。如何在UI变化期间保持此元素静止?
任何见解或解决方案将不胜感激。
谢谢你,谢谢

uqdfh47h

uqdfh47h1#

如果元素的样式是位置固定的,只需要设置bottom而不是top,并使用px而不是vh的Exact number,当顶部距离改变时,它总是将位置固定到底部,我在下面添加了一个演示,你可以测试它

<table>
  <tbody>
    <tr>
      <td id="cell1">
        Cell 1
      </td>
      <td id="cell2">
        Cell 2
      </td>
      <td id="cell31">
        Cell 3
      </td>
      <td id="cell4">
        Cell 4
      </td>
    </tr>
    <tr>
      <td id="cell5">
        Cell 5
      </td>
      <td id="cell6">
        Cell 6
      </td>
      <td id="cell7">
        Cell 7
      </td>
  </tbody>
</table>
<script>
  document.querySelector('table').style.bottom = document.documentElement.clientHeight + 'px'
</script>

字符串

相关问题