Изменение гибкого порядка CSS приводит к прокрутке

Question

Рассмотрим следующий HTML.У этого есть два заголовка и статьи, и кнопка, которая переключает порядок, в котором они появляются.

Работает, как и ожидалось , если "Заголовок 1" не наполовину скрыт (см. GIF), прокручивая немного вниз.Затем, когда вы нажимаете кнопку, она заставляет окно прокручиваться вниз, как будто для отображения заголовка.

Это происходит в Chrome 74 и Firefox 66, но не в Edge.

Почему это происходит?И есть ли способ избежать этого?

const $ = document.querySelector.bind(document);
const div = $('div')
const button = $('button');

button.onclick = () => {
	div.classList.toggle('toggled')
}

div { display: flex }
div { flex-direction: column }

h1.first { order: 1 }
button { order: 2 }
div.first { order: 3 }
h1.second { order: 4 }
div.second { order: 5 }

.toggled h1.first {order: 4}
.toggled h1.second {order: 1}
.toggled div.first { order: 5 }
.toggled div.second { order: 3 }

<div id="div" >

  <h1 class="first">Header 1</h1>
  <h1 class="second">Header 2</h1>

  <button>Click me</button>

  <div class="first">
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
  </div>


  <div class="second">
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
  </div>

</div>

Answer 1

Проблема в том, как некоторые браузеры обрабатывают элементы заголовка.

Обратите внимание, что если вы переключите элементы h1 на p (просто добавьте их в качестве заголовков), проблема будет решена.

const $ = document.querySelector.bind(document);
const div = $('div')
const button = $('button');

button.onclick = () => {
	div.classList.toggle('toggled')
}

div { display: flex; }
div { flex-direction: column }

p.first { order: 1; font-size: 2em; }
button { order: 2 }
div.first { order: 3 }
p.second { order: 4; font-size: 2em; }
div.second { order: 5 }

.toggled h1.first {order: 4}
.toggled h1.second {order: 1}
.toggled div.first { order: 5 }
.toggled div.second { order: 3 }

<div id="div" >

  <p class="first">Header 1</p>
  <p class="second">Header 2</p>

  <button>Click me</button>

  <div class="first">
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
    This is the first box. This is the first box. This is the first box. This is the first box. 
  </div>


  <div class="second">
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
    This is the second box. This is the second box. This is the second box. This is the second box. 
  </div>

</div>

Тем не менее, вы можете переопределить поведение с помощью следующего кода в контейнере flex:

 overflow-anchor: none

Это отключитфункция в уязвимых браузерах, известная как «привязка прокрутки».

Подробнее здесь: Направление расширения, привязанное к окну просмотра Google Chrome, с flexbox

Answer 2

Это может быть связано с тем, как разные браузеры обрабатывают привязку прокрутки .Попробуйте обработать щелчок этой библиотекой перед перемещением объектов в DOM.

import {preserveAnchorNodePosition} from "https://unpkg.com/scroll-anchoring@0.1.0/dist/scroll-anchoring.esm.js";

const $ = document.querySelector.bind(document);
const div = $('div');
const button = $('button');

button.onclick = () => {
  preserveAnchorNodePosition(document, () => {
    div.classList.toggle('toggled');
  });
};