Changing CSS flex order causes scrolling

Question

Consider the following HTML. It has two headers and articles, and a button that switches the order in which they appear.

It works as expected unless "Header 1" is half hidden (see GIF) by scrolling slightly down. Then when you press the button it causes the window to scroll down, as if to keep the header in view.

This happens on Chrome 74 and Firefox 66, but not on Edge.

Why is this happening? And is there a way to avoid this?

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>

oops, I'm sorry.... yes its reproducing both in Firefox and Chrome if the header is half out of view... — kukkuz, May 09 '19 at 01:53
I think this is happening because of [scroll anchoring](https://hacks.mozilla.org/2019/03/scroll-anchoring-in-firefox-66/) — laggingreflex, May 09 '19 at 02:30

Michael Benjamin · Accepted Answer · 2019-05-09T02:49:47.733

The problem is the way some browsers treat header elements.

Note that if you switch the h1 to p elements (just style them as headers), the problem is resolved.

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>

That said, you can override the behavior with the following code on the flex container:

 overflow-anchor: none

This will disable a feature in the affected browsers known as "scroll anchoring".

More details here: Google Chrome viewport-anchored expand direction with flexbox

Víctor González · Answer 2 · 2019-05-19T22:29:57.863

It might be related to how different browsers handle scroll anchoring. Try handling the click with this library before moving things in the 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');
  });
};

Changing CSS flex order causes scrolling

2 Answers2

Linked