在 Safari 中应用 -webkit-transform 后无法在 div 内滚动

Question

我正在构建一个幻灯片菜单。

菜单很长，我需要能够在里面滚动，所以我设置了 overflow-y: 在上面滚动。

我正在使用 -webkit-transform（以及其他浏览器上的变体）作为转换属性。

现在我无法在 div 内滚动，在 div 顶部使用滚轮将使整个页面滚动。

如果我更改菜单的行为并向右移动属性（将菜单设置为右：-320px 并将其设置为右动画：0），则滚动有效。

这个错误只发生在 Safari 中，它在 Chrome 和其他浏览器中工作正常。也适用于 iOS.

有人知道解决方法吗？以前有人遇到过这个问题吗？我似乎找不到任何关于它的信息。谢谢。

Answer 1

我遇到了同样的问题，不同之处在于我使用 animation 而不是 transition 和 overflow: auto 而不是 overflow: scroll。

这解决了我的问题（el 是动画应用到的 DOM 元素）：

function fixSafariScrolling(event) {
    event.target.style.overflowY = 'hidden';
    setTimeout(function () { event.target.style.overflowY = 'auto'; });
}

el.addEventListener('webkitAnimationEnd', fixSafariScrolling);

在 Safari 中应用 -webkit-transform 后无法在 div 内滚动

Can't scroll inside a div after applying -webkit-transform in Safari

safari

scroll

overflow

webkit-transform