0

スクロール中の可視性を制御したいヘッダーがあります。ページを下にスクロールすると、ヘッダーは他の要素と同じように動作する必要があります。ページを上にスクロールするとき、ページの位置に関係なく、ページが上がるにつれてヘッダーを表示したいと思います。この動作は、簡単な例を観察することで最もよく理解できます。

スクロール イベントをリッスンし、固定位置の div を負のトップ値で更新しています。

$(function()
{
    var $header = $("#header");
    var $window = $(window);

    var headerHeight = $header.outerHeight();
    var headerY = $header.outerHeight();
    var scrollY = $window.scrollTop();

    $window.on("scroll", function()
    {
        headerY += scrollY - $window.scrollTop();
        if (headerY > headerHeight)
        {
            headerY = headerHeight;
        }
        else if (headerY < 0)
        {
            headerY = 0;
        }
        $header.css(
            {
                top: headerY - headerHeight,
            });
        scrollY = $window.scrollTop();
    });
});

ただし、Chrome for Mobile での動作は、私が期待するものとはまったく異なります。多くの場合、ヘッダーはアニメーション化されず、境界が満たされるとすぐに表示または非表示になります。アニメーションを実行すると、パフォーマンスは停止するほど不規則になり、多くの場合、1 ～ 3 フレームしか描画されません。デスクトップ Chrome のモバイル エミュレーションを使用している場合、この動作は発生しません。実際のデバイスでのみ発生します。

これは、ページ上部の固定位置要素を処理する場合にのみ発生するようです。側面や底面から移動するなど、固定要素を別の方法で変更しようとすると、すべてが期待どおりに機能します。実際、固定位置のトップ要素と固定位置のサイド要素の両方を変更すると、トップ要素はより均一に動作します。

Chrome for Mobile が固定位置の要素をページの上部に配置すると、なぜ不安定になるのですか? 簡潔に説明できる方法はありますか？

4

2 に答える 2

1

ハードウェア アクセラレーションによる CSS3 変換を使用してみてください。topを使用して要素を配置する代わりに、 を使用してみてくださいtransform:translateY。

transform:translateZ(0)また、ヘッダー要素を追加してみてください。

于 2016-09-08T18:09:55.830 に答える
0

ここにはたくさんの遊びがあります。モバイル デバイスはそれほど強力ではありません。デスクトップやアニメーションが遅く見えることがあります。ページに CSS シャドウが含まれている場合は特にそうです。

何が原因なのかはわかりませんが、window.requestAnimationFrameサポートされている場合はいつでも機能するようにします (IE9 などの古いブラウザーのサポートを確認する必要があります)。

これは、モバイル GPU が再描画の準備ができたとき (通常は 16.6 ミリ秒ごと) に画面を再描画し、タイムリーに処理できない要求でいっぱいにならないようにするという考え方です。

だから私はこのようなことを試してみます（テストされていません）：

$(function()
{
    var $header = $("#header");
    var $window = $(window);

    var headerHeight = $header.outerHeight();
    var headerY = $header.outerHeight();
    var scrollY = $window.scrollTop();
    var requestId;

    $window.on("scroll", function()
    {
        //run only when no request is pending.
        if (requestId === undefined) {
             requestId = window.requestAnimationFrame(animateHeader);
        }
    });

    function animateHeader() {
        requestId = undefined;

        headerY += scrollY - $window.scrollTop();
        if (headerY > headerHeight)
        {
            headerY = headerHeight;
        }
        else if (headerY < 0)
        {
            headerY = 0;
        }
        $header.css(
            {
                top: headerY - headerHeight,
            });
        scrollY = $window.scrollTop();
    }

});

それが何かを解決するかどうかはわからないので、試してみたらフィードバックをいただければ幸いです。

  • 編集条件 requestAnimationFrame を呼び出す必要があります。
于 2016-09-06T18:18:16.467 に答える