element.scroll Для плавной прокрутки не работает в Safari в подключаемом прокручиваемом контейнере

Question

Я создаю слайдер эскизов и хотел использовать скроллинг и scrollTo. Когда я выбираю эскиз, я хочу, чтобы другой прокручиваемый контейнер прокручивал до изображения с идентификатором, связанным с этим большим пальцем. Я хочу, чтобы была видна прокрутка, а не просто «переход» к изображению. Все это отлично работает в Firefox, Chrome и других.

Однако я знаю, что scrollTo имеет ограниченную поддержку в Safari до 14.7, но даже в самой последней версии я не могу воссоздать поведение плавной прокрутки.https://caniuse.com/?search=scrollto

Я создал CodePen, чтобы продемонстрировать свою проблему https://codepen.io/Bregt/pen/jOwJGMJ

Я добавил следующий CSS в свой горизонтальный прокручиваемый контейнер.

      .h {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 200px;
}

.h > * {
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

В моем JavaScript я получаю элемент с определенным идентификатором, а затем использую scrollTo в контейнере.

      document.querySelector(".js-h-slide").addEventListener("click", (e) => {
  let element = document.getElementById("h-image-5");  
  document.querySelector(".js-h-slides").scrollTo({
    left: element.offsetLeft,
    behavior: "smooth"
  })
});

Что я забыл?

Answer 1

Такое поведение очевидно возможно, но за флажком. Я смущен тем, что упоминается в разделе «Могу ли я использовать о scrollTo».

Это информация, которую я нашел на WebKitbugs.webkit.org/show_bug.cgi?id=188043

В конце концов, я использовал полифилл «smoothscroll-polyfill», который я динамически импортирую. (https://github.com/iamdustan/smoothscroll) :(

      if (!('scrollBehavior' in document.documentElement.style)) {
    import('smoothscroll-polyfill').then((module) => {
        module.polyfill();
    }).then(() => {
        ...
    });
}