时间戳

首页 > 解决方案 > 为什么在溢出内输入绝对位置会导致页面上的全局滚动条？

html - 为什么在溢出内输入绝对位置会导致页面上的全局滚动条？

问题描述

当我在具有（或任何不可见的溢出）的 div 中输入position: absolute样式时，并且当 div 确实溢出时，html 元素会获得溢出内容高度的垂直滚动条。overflow: scroll

它显示在以下代码段中：

<!DOCTYPE html>
<html>
  <body>
    <div style="height: 80vh;display: flex;width: 20rem;">
      <div style="overflow: scroll;">
        <hr style="width: 0; height: 200vh; margin: 0 10rem;" />
        <input style="position: absolute;" />
      </div>
    </div>
  </body>
</html>

如果删除<hr/>元素，全局滚动条就会消失，因为内部 div 不再溢出。如果您用<input>空替换元素，<div>则问题不再显示。

我的问题是：

背景：我有一个页面，其界面采用所有可见视口，并且没有页面滚动条。任何可滚动的内容都通过溢出属性在页面内进行管理。我使用position: absoluteCSS 属性（以及其他属性）隐藏了其中的输入元素，以确保它们仍然是可聚焦的。

标签： htmlcssscrollbaroverflow

解决方案

一种解决方案是position: relative在溢出元素上放置一个属性：

<!DOCTYPE html>
<html>
  <body>
    <div style="height: 80vh;display: flex;width: 20rem;">
      <div style="overflow: scroll;position:relative;">
        <hr style="width: 0; height: 200vh; margin: 0 10rem;" />
        <input style="position: absolute;" />
      </div>
    </div>
  </body>
</html>

但它不起作用，isolatiob: isolate尽管我认为它会起作用：

<!DOCTYPE html>
<html>
  <body>
    <div style="height: 80vh;display: flex;width: 20rem;">
      <div style="overflow: scroll;isolation: isolate;">
        <hr style="width: 0; height: 200vh; margin: 0 10rem;" />
        <input style="position: absolute;" />
      </div>
    </div>
  </body>
</html>

相关文档：MDN on stacking contexts

推荐阅读