Element.scrollIntoView（）の振る舞い動作

Question

私はを使用しています。スクロールは機能していますが、同時に私のページ全体のレイアウトが崩れます。デモ以下の通りです：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    background-color: lightgray; 
 
} 
 

 
ul { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300px; 
 
    left: 0; 
 
    bottom: 0; 
 
    background-color: gray; 
 
    overflow-y: scroll; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
#div { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 300px; 
 
    left: 0; 
 
    bottom: -300px; 
 
    background-color: darkgray; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div class=content> 
 
    <!-- it's the ul to scroll, staying at the bottom of the page --> 
 
    <ul> 
 
    <li id=li>abc</li> 
 
    <li>def</li> 
 
    </ul> 
 
    <!-- it's the div hidden under the bottom edge of the page --> 
 
    <div id=div>i should stay hidden.</div> 
 
    <button onclick=li.scrollIntoView();>scrollIntoView</button> 
 
</div>

私は、ページの下部エッジの下<div>を非表示にします。 scrollIntoView第1 <li>が<ul>である場合、隠された<div>が引き出されます。 <div>だけでなく、ページの全内容が300pxにプルアップされています。

<li>を<ul>に単純にスクロールすることが期待されます。ページ全体のレイアウトに影響するのはなぜですか？

Answer 1

私は自分自身で答えを見つけると思います。 this answerを参照してください。それはアンカーについてですが、scrollIntoViewは内部的には同じメカニズムを共有しています。

ブラウザは、要素が確実に表示されるようにします。コンテナ内にあるときは、最初にコンテナーを最も視認性の高い位置にスクロールし、内容を引き上げます。