0

我正在创建一个缩略图滑块并想使用快照滚动和滚动到。当我选择一个缩略图时，我希望另一个可滚动容器滚动到该缩略图链接到的 id 的图像。我希望滚动可见，而不仅仅是图像的“跳转”。这一切都适用于 Firefox、Chrome 等。

但是，我知道在 14.7 之前，scrollTo 在 Safari 中的支持有限，但即使在最新版本中，我也无法重新创建平滑滚动行为。 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"
  })
});

我忘记了什么？

4

1 回答 1

1

这种行为显然是可能的，但在标志后面。我对我可以使用关于 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(() => {
        ...
    });
}
于 2021-10-02T20:30:38.290 回答