指定されたdivのzIndexを変更した場合(同じ値であっても)、そのscrollTopプロパティがリセットされ、開始するまでスクロールします。これは私のサイトに非常に醜い効果を引き起こします(再描画中にdiv全体の減速と黒い四角形)。 scrollTopのリセット後、私はそれを元に戻すことができますが、これはもう一つの醜い再描画を引き起こします。FirefoxのscrollTopをzIndexに変更する
このFFバグは私を怒らせています!私は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>
それはFirefoxが本当の開発者が提出したバグが何であるかをどのように決定するか、完全な謎です – selbie
これはzIndexに固有のようには見えませんが、表示スタイルを切り替えるとスクロール位置がリセットされて表示されます – selbie