Firefox 滚动顶部在 zIndex 更改时重置
每当我更改给定 div 的 zIndex（甚至更改为相同的值）时，其 scrollTop 属性都会重置，并且会滚动回开始位置。这会给我的网站带来非常难看的效果（重新绘制时整个 div 会变慢并出现黑色矩形）。重置scrollTop后，我可以将其设置回来，但这会导致另一次丑陋的重画。
这个FF bug快把我逼疯了！我在 mozilla https://bugzilla.mozilla.org/show_bug.cgi?id 提交了一个错误=623937，但他们不愿意为此工作！拜托，如果有人知道如何用一些 javascript 魔法来解决这个问题？也许可以使用 HTMLElement 原型来以某种方式覆盖scrollTop？
这是一个小测试用例”
<html>
<head>
<style type="text/css">
div#parentDiv
{
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 200px;
background-color: green;
}
div#elementToScroll
{
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 100px;
overflow-y: hidden;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="parentDiv">
This is the parent DIV
<div id="elementToScroll">This is the child div with overflow-y: hidden and content a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of ; </div>
</div>
<script>
var parentDIV = document.getElementById("parentDiv");
var elementToScroll = document.getElementById("elementToScroll");
alert ("elementToScroll.scrollTop initial: " + elementToScroll.scrollTop);
elementToScroll.scrollTop = 20;
alert ("We set elementToScroll.scrollTop = 20: current value is: " + elementToScroll.scrollTop);
parentDIV.style.zIndex = 0;
alert ("We set parentDIV.style.zIndex and now elementToScroll.scrollTop is: " + elementToScroll.scrollTop);
</script>
</body>
</html>
Whenever I change zIndex of given div (even to the same value) its scrollTop property resets and it scrolls back to start. This causes a very ugly effect to my site (slowdown and black rectangle over the entire div while it repaints). After scrollTop reset I can set it back, but this causes yet another ugly repaint.
This FF bug is driving me mad! I submitted a bug in mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=623937 but they don't care to work on it! Please, if somebody knows how to workaround this issue with some javascript magic? Maybe play with the HTMLElement prototype to somehow override scrollTop?
Here goes a little test case"
<html>
<head>
<style type="text/css">
div#parentDiv
{
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 200px;
background-color: green;
}
div#elementToScroll
{
position: absolute;
top: 40px;
left: 40px;
width: 200px;
height: 100px;
overflow-y: hidden;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div id="parentDiv">
This is the parent DIV
<div id="elementToScroll">This is the child div with overflow-y: hidden and content a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of a lot of ; </div>
</div>
<script>
var parentDIV = document.getElementById("parentDiv");
var elementToScroll = document.getElementById("elementToScroll");
alert ("elementToScroll.scrollTop initial: " + elementToScroll.scrollTop);
elementToScroll.scrollTop = 20;
alert ("We set elementToScroll.scrollTop = 20: current value is: " + elementToScroll.scrollTop);
parentDIV.style.zIndex = 0;
alert ("We set parentDIV.style.zIndex and now elementToScroll.scrollTop is: " + elementToScroll.scrollTop);
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我测试过，Firefox 4 没有任何问题：
I tested and nothing is wrong with Firefox 4: