Использовать поведение 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 1-й <li> в <ul>, скрытый <div> вытащил. Не только <div>, весь контент страницы поднят за 300px.

Я ожидаю, что это просто прокрутить <li> в виду <ul>, Почему это влияет на макет всей страницы?

Answer 1

Я думаю, что я нахожу ответ сам. Смотрите этот ответ. Это про якоря, но scrollIntoView Я думаю, что у меня один и тот же механизм.

Браузер сделает все возможное, чтобы элемент был виден. Когда он находится в контейнере, он сначала прокручивает контейнер в положение с наилучшей видимостью, поэтому содержимое вытягивается вверх.