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 첫 번째 <li>이 <ul> 인 경우 숨겨진 <div>이 제거됩니다. <div>뿐만 아니라 페이지의 전체 내용이 300px 당겨집니다.

<li>을 <ul>으로 간단히 스크롤해야합니다. 페이지 전체의 레이아웃에 왜 영향을 미치나요?

Answer 1

직접 답변을 찾은 것 같습니다. this answer을 참조하십시오. 그것은 앵커에 관한 것이지만 scrollIntoView은 내부적으로 같은 메커니즘을 공유합니다.

브라우저가 요소를 볼 수 있도록 최선을 다할 것입니다. 컨테이너에있을 때 가장 먼저 컨테이너를 가장 잘 보이는 위치로 스크롤하여 내용을 위로 끌어 올립니다.