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

我正在构建幻灯片菜单。

菜单很长，我需要能够在菜单中滚动，因此我设置了溢出-y:在菜单上滚动。

我正在使用-webkit-transform(以及其他浏览器的变体)作为transition属性。

现在，我无法在div内滚动，使用div上方的滚轮将使整个页面滚动。

如果我更改菜单的行为并转换right属性(将菜单设置为right:-320px并将其动画化为right:0)，则滚动将起作用。

此错误仅发生在Safari中，在Chrome和其他浏览器中正常运行。也可在iOS上使用。

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

最佳答案

我有一个相同的问题，区别在于我使用了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 - 在Safari中应用-webkit-transform后无法在div中滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28288710/