Question

我正在开发一个React应用程序，该应用程序在同一页面上包含一个水平滚动视图和一个弹出窗口。在Chrome中进行测试时，我注意到一个错误，尽管该弹窗具有绝对位置，但水平滚动视图的滚动条仍在我放置的弹窗之上呈现。我将问题缩小为一个简化的示例。这是Chrome上该问题的屏幕截图：

我尝试了以下方法：

将容器设置为相对位置，并调整容器和弹出框的z索引。
调整容器上的overflow属性。

这是我整理的一个简化的HTML示例，用于演示该问题。

<html>
<head>
    <style type="text/css">
        body {
            overflow: hidden;
            position: relative;
        }

        .container {
            width: 1000px;
            height: 50px;
            overflow: scroll;
            white-space: nowrap;
        }

        .popover {
            width: 200px;
            height: 200px;
            top: 0;
            left: 100px;
            background-color: teal;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="popover">
    Hi!
</div>

</body>
</html>

我也将其放入了JSFiddle。

我希望滚动条显示在弹出框的后面。相反，它呈现在弹出窗口的顶部。

我应该注意，预期的行为在Firefox上发生。 Chrome和Safari均出现此问题。（我在Mac上。）

有人知道如何在Chrome和Safari上使滚动条呈现在弹出框的后面吗？我希望使用CSS解决方案，但是由于原始问题是在更大的React应用程序中发生的，因此我还可以使用一些JavaScript来解决问题。

Answer 1

我无法在macOS Firefox上重现该错误，但是绝对可以在macOS Chrome和Safari上重现该错误-这似乎是一个Webkit /眨眼渲染问题。您可以使用的一个技巧是强制在元素上进行GPU合成：只需使用transform: translate3d(0,0,0);即可完成此操作。请参见下面的概念验证示例：

body {
  overflow: hidden;
  position: relative;
}

.container {
  background: yellow;
  width: 1000px;
  height: 50px;
  overflow: scroll;
  white-space: nowrap;
}

.popover {
  width: 200px;
  height: 200px;
  top: 0;
  left: 100px;
  background-color: teal;
  position: absolute;
  transform: translate3d(0,0,0);
}

<div class="container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div class="popover">
  Hi!
</div>

Answer 2

不确定这是否可以在较大的应用程序中使用，但我相信将弹出位置设置为相对位置，并移动HTML，以便在容器下方呈现弹出窗口即可解决问题。我在Mac上的Chrome浏览器中使用了它，效果很好。

<html>
    <head>
        <style type="text/css">
            body {
                overflow: hidden;
                position: relative;
            }

            .container {
                width: 1000px;
                height: 50px;
                overflow: scroll;
                white-space: nowrap;
            }

            .popover {
                width: 200px;
                height: 200px;
                top: 0;
                left: 100px;
                background-color: teal;
                position: relative;
            }
        </style>
    </head>
<body>
    <div class="popover">
        Hi!
    </div>
        <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
</body>
</html>

滚动条在绝对定位的元素上方渲染，以在元素

2 个答案: