7

スライドメニューを作成しています。

メニューは長く、その中をスクロールできるようにする必要があるため、overflow-y: scroll を設定しました。

-webkit-transform (および他のブラウザーのバリアント) を遷移プロパティとして使用しています。

divの上にスクロールホイールを使用すると、ページ全体がスクロールされます。

メニューの動作を変更し、右のプロパティを移行すると (メニューを右に設定: -320px し、アニメーションを右に戻す: 0)、スクロールが機能します。

このバグは Safari でのみ発生します。Chrome やその他のブラウザでは問題なく動作します。iOSでも動作します。

誰でも回避策を知っていますか？以前にこの問題を経験した人はいますか? 私はそれに関する情報を見つけることができないようです。ありがとうございました。

4

1 に答える 1

17

animationの代わりに を使用し、 の代わりにをtransition使用するという違いで、同じ問題がありました。overflow: autooverflow: scroll

これで問題が修正されました（elアニメーションが適用されるDOM要素です）：

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

el.addEventListener('webkitAnimationEnd', fixSafariScrolling);
于 2015-02-08T00:50:17.433 に答える