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内滚动

1 个答案: