元素.在可抓取的可滚动容器中，在Safari中不工作的平滑滚动

Question

我正在创建一个缩略图滑块，并希望使用snap滚动和scrollTo。当我选择一个缩略图时，我希望另一个可滚动的容器滚动到这个缩略图链接到的带有id的图像。我希望滚动条是可见的，而不仅仅是一个"跳转"到图像。

然而，我知道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

这种行为显然是可能的，但是在一个标志后面。我很困惑，但在什么是提到我可以使用关于scrollTo.

这是我在WebKit找到的信息http://bugs.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(() => {
...
});
}