Почему при переключении элемента flex-direction с самым низким порядком прокручивается в область просмотра?

Question

У меня есть список, созданный с помощью CSS FlexBox .Я назначил по некоторым критериям order всем элементам flexbox , поэтому список визуально отсортирован.Также у меня есть кнопка, которая переключает flex-direction flexbox контейнер , чтобы я мог отменить порядок презентации.У меня ограниченное пространство, поэтому с помощью overflow-y: scroll; и когда я изменяю визуальный порядок списка с помощью flex-direction, элемент с order: 1 прокручивается в область просмотра.Поэтому, когда он находится сверху (flex-direction: column;) - прокрутите начало контейнера (в списке 10 пунктов),

, но когда я применяю flex-direction: column-reverse;- Я все еще вижу этот элемент, но теперь прокрутка находится в нижней части контейнера:

Почему прокрутка следует за элементом с самым низким order свойством?

Вот мой код в Относительный код или встроенный ниже

HTML

<div class="alternator">
  <button>Reverse order</button>
</div>

<div class="wrapper">
  <div class="item a10">10 away</div>
  <div class="item a2">2 upon</div>
  <div class="item a3">3 a</div>
  <div class="item a4">4 time</div>
  <div class="item a5">5 in</div>
  <div class="item a6">6 a</div>
  <div class="item a7">7 galaxy</div>
  <div class="item a1">1 once</div>
  <div class="item a8">8 very</div>
  <div class="item a9">9 far</div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  max-height: 350px;
  border: 2px solid green;
  width: 150px;
}

.wrapper.reversed {
  flex-direction: column-reverse;
}

.item {
  height: 30px;
  padding: 20px;
}

.a1{order: 1;}
.a2{order: 2;}
.a3{order: 3;}
.a4{order: 4;}
.a5{order: 5;}
.a6{order: 6;}
.a7{order: 7;}
.a8{order: 8;}
.a9{order: 9;}
.a10{order: 10;}

button {
  margin-bottom: 20px;
  width: 150px;
  height: 30px;
}

JS

const btn = document.querySelector('.alternator button');
const list = document.querySelector('.wrapper');

btn.addEventListener('click', () => {
  list.classList.toggle('reversed');
})

ОБНОВЛЕНИЕ Поскольку ответ ниже касается прокрутки, я должен добавить здесь, что flex-direction: *-reverse работает как свойство order, а именно только визуально изменяет порядок элементов, поэтому первый элемент в дереве DOM остается там после рендеринга:

«Примечание: возможности переупорядочения гибкого макета преднамеренно влияют только навизуальный рендеринг, оставляя речевой порядок и навигацию на основе исходного порядка.Это позволяет авторам манипулировать визуальным представлением, оставляя исходный порядок нетронутым для UA не-CSS и для линейных моделей, таких как речь и последовательная навигация. »- Упорядочение и ориентация

Ссылка от MDN .

Answer 1

Я не уверен, почему именно это, но я думаю, что это связано с тем, что свиток работает таким образом - он начинается с первого элемента в DOM.

СогласноMDN относительно цели прокрутки (https://developer.mozilla.org/en-US/docs/Web/Events/scroll):

Цель события (самая верхняя цель в дереве DOM).

Но вот небольшой взлом, который может это исправить:

добавить элемент 0 в начало списка <div class="item a0">000</div> и затем выполнить следующие действия:

btn.addEventListener('click', () => {
    list.classList.toggle('reversed');
    if(list.classList.contains('reversed') ){
        list.children[0].style.order = 100;
    } else {
        list.children[0].style.order = 0;
    }
    list.children[0].scrollIntoView();
});