element.scrollTo Safari 中的可滑动滚动容器中的平滑滚动不起作用

Question

我正在创建一个缩略图滑块并想使用对齐滚动和 scrollTo。当我 select 缩略图时，我希望另一个可滚动容器滚动到具有此缩略图链接到的 id 的图像。我希望滚动可见，而不仅仅是“跳转”到图像。这一切在 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中，我获取具有特定ID的元素，然后在容器上使用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

这种行为显然是可能的，但背后有一个标志。我对 Can I Use about scrollTo 中提到的内容感到困惑。

这是我在 WebKit 上找到的信息 http://bugs.webkit.org/show_bug.cgi?id=188043

最后，我使用了动态导入的'smoothscroll-polyfill' polyfill。 (https://github.com/iamdustan/smoothscroll) :(

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

element.scrollTo Safari 中的可滑动滚动容器中的平滑滚动不起作用

element.scrollTo smooth scrolling not working in Safari in snappable scrollable container

scrollto

horizontal-scrolling

smooth-scrolling

vertical-scrolling

snap