Как при скроле показать последнюю активную хлебную крошку?

Question

[Vladislav]

Как сделать , чтобы на мобилке при переходе на страницу показывалась последняя хлебная крошка, вот так:

А изначально состояние такое:

Есть у меня предположение, что так делать можно только на JS, если так то нативный вараинт напишите пожалуйста
код родителя хлебных крошек:

.bread-crumbs {
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
   }

<ul class="bread-crumbs">
      <li><a href="">Главная</a></li>
       <li><a href="">Работы</a></li>
        <li><a href="">Дизайн-проект</a></li>
        <li><a href="">1-к Квартира 57 кв/м</a></li>
 </ul>

Comments

[Вадим]

Так на мобилке, или при скроле?

[Vladislav]

Вадим, когда с мобильного устройства зашел, чтобы скрол бы в самом конце родителя, то есть видна будет последняя активная хлебная крошка

Answer 1

[Вадим]

css media +

.bread-crumbs {
  justify-content: flex-end;
}

Ну а если через JS, то как-то так:

var crumbs = document.querySelector('.bread-crumbs')
crumbs.scrollLeft = crumbs.scrollWidth

Comments

[Vladislav]

Вадим спасибо большое)

[Вадим]

Vladislav, только смотрите, если через css то там скролл ломается. Поэтому дописал вариант через js.

[Vladislav]

Вадим, заметил, спасибо)