Ссылка привязки прокручивается в скрытое содержимое переполнения скрыто

Question

Недавно я обнаружил, что якоря на странице прокручиваются за края элемента с помощью overflow: hidden.

См. Здесь - прокрутите вниз, чтобы увидеть элемент, обрезанный из-за переполнения. Прокрутите вверх и нажмите на якорь. Он прыгает вниз за нижнюю часть перекрытия. Затем попробуйте прокрутить весь путь до верхней части страницы; Вы не можете, так как якорь / верхняя часть страницы обрезана.

body {
  background: white;
}

.page {
  overflow: hidden;
}

.content {
  padding-top: 200vh; /* just to create scroll */
  background: rgba(255,0,0,0.3);
  position: relative;
}

.target {
  position: absolute;
  top: 95%;
  left: 0;
  width: 100px;
  height: 100px;
  background: yellow;
}

<div class="page">
  <div id="top"><a href="#anchor">Jump to target</a></div>
  <div class="content">        
    <div class="target" id="anchor"><a href="#top">Target</a></div>
  </div>
</div>

Два вопроса:

1) Почему это происходит? Это ошибка / причуды, или предполагаемое поведение? Например, переполнение скрыто, но все еще можно прокручивать.

2) Есть ли способ предотвратить это?

Answer 1

просто изменить в целевом классе top: 95%; на bottom: 0;

После изменения:

in css

body {
  background: white;
}

.page {
  overflow: hidden;
}

.content {
  padding-top: 200vh;
  background: rgba(255, 0, 0, 0.3);
  position: relative;
}

.target {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: yellow;
}

<div class="page">
  <div id="top"><a href="#anchor">Jump to target</a></div>
  <div class="content">
    <div class="target" id="anchor"><a href="#top">Target</a></div>
  </div>
</div>