CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルです

CSS スクロール スナップは、Web ページ コンテナーがスクロールを停止したときに、JS コードを介さずにブラウザーが指定された要素の指定された位置に自動的かつスムーズに配置できるようにする非常に便利な機能です。スライドショー広告と同様の効果は、純粋な CSS で実現できます。

さらに、CSS Scroll Snap は互換性に優れており、モバイル デバイスでもほぼ安全に使用できます。

2. 実際のプロジェクトからのスクロールスナップシナリオ

今日の午後、機能要件を実装していたところ、Scroll Snap を使用して実装するのに非常に適したシナリオに遭遇しました。これは、スライドして文字を順番に表示するというものです。それで、大胆に使ってみたのですが、すごいですね。境界判定をするための js は必要なく、スライドが止まると自動的に目的の位置に配置されるんです。

主要な CSS コードは次のとおりです。

ul {
    幅: 375ピクセル; 高さ: 667ピクセル;
    scroll-snap-type: x 必須;
    -webkit-オーバーフロースクロール: タッチ;
    空白: ラップなし;
    オーバーフロー-y: 非表示;    
}
li {
    表示: インラインブロック;
    幅: 100%; 高さ: 100%;
    スクロールスナップ位置: 中央;
}

スクロールする親コンテナ要素scroll-snap-type:x mandatory設定し、水平方向にスクロールして配置を強制します。子リスト要素にscroll-snap-align:centerを設定すると、リストがスクロール コンテナの中央に表示されるため、効果が得られます。

ただし、スクロール配置が完了した後も、現在配置されている文字素材を強調表示する必要があります。これはちょっと難しかったです！

従来、このスライド効果は JS を使用して実装されていました。JS アニメーションが終了しても、CSS アニメーションが終了しても、使用できるコールバック関数がありました。しかし、ここでは転がっており、転がった後、しばらくは自己位置を決めます。自己位置を決める時間はさまざまです。いつ止まるかは誰にもわかりません。複数の要素を一度にスライドすると、どの要素で停止すればよいかわからない場合があります。

実際、標準設定者とブラウザメーカーは、スクロールがいつ停止するか、どの要素にスクロールが位置しているかを正確に把握できるように、スクロールスナップ関連のコールバックイベントの実装を積極的に推進しています。ただし、この標準はまだ開発中であり、ブラウザはまだこれをサポートしていません。プロジェクトを今すぐ使用する必要があります。どうすればよいでしょうか?

右！ JS アシスタンスを使用する必要があります。

実際、Scroll Snap の使用シナリオでなくても、通常のスクロールであっても、スクロールの慣性により、スクロールが停止したかどうかを検出することも一般的な要件です。そのため、スクロールが停止したことを検出する方法を考え出す必要があります。

3. スクロール停止検出方法

要素のスクロールが停止したかどうかを検出するための実装アイデアは、スクロール イベントでタイマーを実行して、現在のスクロール距離が前回のスクロールの距離と等しいかどうかを記録することです。等しい場合は、スクロールが停止したと見なされます。等しくない場合は、スクロールがまだ進行中であると見なされます。

JavaScript 表現は次のとおりです (この実装は非推奨です)。

// 水平スクロールが終了したかどうかを検出するために使用されるタイマー var timer = null;
// 最後のスクロール距離 var scrollLeft = 0, scrollTop = 0;
// スクロールイベントが開始されます。container.addEventListener('scroll', function () {
    タイマーの間隔をクリアします。
    // タイマーをリセットする timer = setInterval(function () {
        コンテナのスクロール左 == スクロール左 && コンテナのスクロール上 == スクロール上) {
            // スクロール距離が等しい場合、スクロールが停止したとみなします clearInterval(timer);
            // ... コールバック処理など、必要な処理を実行します } else {
            // それ以外の場合は、最後のスクロール位置を記憶します scrollLeft = container.scrollLeft;
            スクロールトップ = コンテナ.スクロールトップ;
        }
    }, 100);
});

興味があれば、上記のコードをさらにカプセル化することもできます。

翌日更新

慣性スクロール イベントとスナップ位置スクロール イベントの両方が継続的にトリガーされるため、スクロール終了検出では、前のスクロール距離と次のスクロール距離が等しいかどうかを判断する必要はありません。したがって、直接的に次のことが可能です。

// 水平スクロールが終了したかどうかを検出するために使用されるタイマー var timer = null;
// スクロールイベントが開始されます。container.addEventListener('scroll', function () {
    タイマーをクリアします。
    // タイマーをリセットする timer = setTimeout(function () {
        // スクロール イベントがトリガーされないため、スクロールは停止したとみなされます // ... コールバック処理など、必要な処理を実行します }, 100);
});

もちろん、上記で提供した方法は、ブラウザ自体にスクロールスナップの最終的な再配置の検出機能があるため、非常に正確な終了検出ではありません。私が何度も調査とテストを行った結果、この検出イベントは350ms （実際の動作は数ミリ秒程度長くなる可能性があります）である必要があり、これは上記で設定した100msよりもはるかに大きいです。そのため、スナップ配置が開始される前に、誤った冗長な判断が行われることになります。

考えてみると、この問題は避けられないが、大きな問題ではないことに気づきました。検出時間を400msに設定することはできません。遅延が大きすぎて、エクスペリエンスが良くない可能性があります。

4. 現在のスクロール対象要素の検出方法

原理は次のとおりです。すべてのリスト要素を反復処理し、スクロール コンテナーの左端 (左揃えの場合 - scroll-snap-align:left )、中央 (中央揃え)、または右端 (右揃え) を基準としたリスト要素の左端の位置を検出します。もちろん、リスト要素のサイズがスクロール コンテナーのサイズと一致している場合は、左、中央、右のエッジ検出のいずれも許容されます。

JS は以下を示します:

[].slice.call(container.children).forEach(関数(ele, インデックス) {
    (Math.abs(ele.getBoundingClientRect().left - container.getBoundingClientRect().left) < 10) の場合 {
        // 現時点での ele 要素は現在配置されている要素です // ... ele で好きなことをすることができます } else {
        // 現時点での ele 要素は現在配置されている要素ではありません}
});

厳密に言えば、 10未満ではなく0に等しいかどうかを計算する必要があります。ここで、許容区間を追加します。

JS の支援を必要とする上記の 2 つの要件を解決すると、最終的な効果が達成されます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。