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

Question

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

菜单很长，我需要能够在其中滚动，所以我设置了 overflow-y: scroll 。

我使用 -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);