todays_mitsui https://blog.hatena.ne.jp/todays_mitsui/ 無駄と文化 https://blog.mudatobunka.org/ JavaScript プログラミング フロントエンド JavaScript を使って画面上の要素を入れ替えたとき、スクロール位置が勝手に動いて画面がカクつくという現象に遭遇しました。調査して分かったことをまとめます。 まずはデモをご覧ください todays-mitsui.github.io カラフルな <div> が並んでいて、右上のボタンを押すとすぐ上の要素と位置が入れ替わるデモを作りました。 ボタンを押すとすぐ上の要素と入れ替わる ここまではなんの変哲もありません。ところが、まったく同じコードでも要素が大きくなると違う挙動になります。 すぐ上の要素と入れ替わる、と同時にスクロール位置がシフトする ボタンを押すと同時にスクロール位置がシフトして… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.mudatobunka.org%2Fentry%2F2025%2F02%2F03%2F100000" title="要素を入れ替えたときにスクロール位置が追従することがあるみたい - 無駄と文化" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/t/todays_mitsui/20250201/20250201174405.gif Hatena Blog https://hatena.blog 2025-02-03 10:00:00 rich https://blog.mudatobunka.org/entry/2025/02/03/100000 1.0 100%