我正在开发一个React应用程序,它包括一个水平滚动视图和同一页面上的弹出窗口。我在Chrome中测试时注意到一个bug,水平滚动视图的滚动条在我放置的弹出窗口的顶部呈现,尽管弹出窗口有一个绝对位置。我把问题缩小到一个简单的例子。以下是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来解决这个问题。
最佳答案
我不能在macOS Firefox上重现这个bug,但绝对可以用macOS Chrome和Safari重现它,这似乎是一个webkit/blink渲染问题。您可以使用的一个技巧是强制对元素进行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>