使用Element.scrollIntoView（）的行爲

Question

我使用的是Element.scrollIntoView()。滾動正在工作，但它同時打破了整個頁面的佈局。以下是演示：

* { 
 
    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第一<li>在<ul>，隱藏<div>被拉出。不僅<div>，該頁面的全部內容被拉上了300px。

我希望它只是滾動<li>到<ul>的視圖。它爲什麼會影響整個頁面的佈局？

Answer 1

我想我自己找到答案。見this answer。這是關於錨，但scrollIntoView在內部共享相同的機制，我認爲。

瀏覽器將盡最大努力確保元素可見。當它在一個容器中時，它將首先將容器滾動到具有最佳可見度的位置，以便內容被拉起。