更改CSS Flex顺序会导致滚动
考虑以下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>
2 个答案:
答案 0 :(得分：2)
问题在于某些浏览器对待标头元素的方式。
请注意，如果您将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 viewport-anchored expand direction with flexbox
答案 1 :(得分：1)
这可能与不同浏览器处理scroll anchoring的方式有关。在DOM中移动内容之前，请尝试使用this library处理点击。
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');
});
};
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？