1

scrollTopSafari 6 でとscrollLeftパラメータを同時に設定すると、両方の 1 つだけが実行され、1 つの軸だけでページがスクロールされます。これは、ネイティブ JavaScript、jQuery、およびjquery.scrollToプラグインの両方を使用して発生します。

jQuery を使用した例.animate():

$('body').animate({
    'scrollLeft': 100,
    'scrollTop': 100
}, {
    'duration': 500,
    'easing': 'swing'
});

ここにデモ ページを設定しました: http://nabble.nl/demo/safari6scrollto/

すべての例は、すべての主要なブラウザーで期待どおりに正常に動作します。Safari 6 のみの例ではありません。4、6、7 で動作します。どういうわけか、デモ ページをロードするとIFRAME(デモ ページの下部を参照)、すべて正常に動作します。

これはSafariのバグですか？もしそうなら、この問題を回避するにはどうすればよいですか? そうでない場合、何が原因で、どうすれば解決できますか?

その他の関連レポート:

4

1 に答える 1

1

jquery.scrollTo プラグインを OSX Mountain Lion で動作させる必要がありましたが、この動作の原因に関する詳細を見つけることができなかったため、かなり醜い回避策をまとめました。window.scrollTo(x, y)jQuery の のステップ関数で使用されますが.animate()、Safari 6 では問題ありません。

var left;
$(window).animate({
    'pageXOffset': 100,
    'pageYOffset': 100
}, {
    duration: 500,
    easing: 'swing',
    step: function(now, fx) {
        if (fx.prop == 'pageXOffset') {
            left = now;
        } else if (fx.prop == 'pageYOffset') {
            window.scrollTo(left, now);
        }
    }
});

ステップ関数は、アニメーション化されたすべてのプロパティ、アニメーションが適用されるすべての要素に対して呼び出されることに注意してください (この場合は 1: のみwindow)。したがって、アニメーションの現在の X 位置を格納するための中間変数です。

pageXOffsetオブジェクトのとpageYOffsetプロパティを使用するため、この回避策がウィンドウ以外のオブジェクトのとプロパティwindowをアニメーション化するのにどの程度適しているかはわかりません。scrollLeftscrollTop

とにかく、それはドキュメント全体をスクロールするのに機能し、それは私が望んでいたすべてであり、Safari 6 でも非常にスムーズです!

于 2012-11-08T19:18:53.373 に答える