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

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 を応援していただければ幸いです。

<<:  1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

>>:  HTML マーキー文字フラグメントのスクロール

推薦する

Vueはドラッグ可能なツリー構造図を実装します

目次Vue 再帰コンポーネントドラッグイベント最近、Vue を使用して、ドラッグ可能なツリー構造図と...

MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...

MySQLにインデックスを追加しても効果がないいくつかの状況について簡単に説明します。

インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...

適応分析と応答分析の違いを専門用語で詳しく説明

日々の開発経験と関連するオンライン情報に基づいて、アダプティブとレスポンシブの違いをシンプルでわかり...

MySQLセグメンテーション関数substring()の具体的な使用法

MySQL には、主に left()、right()、substring()、substring_i...

Linux サーバーのスクリプトを自動的にバックアップする方法 (mysql、添付ファイルのバックアップ)

1.backup.shスクリプトファイルを作成する #!/bin/sh ソースフォルダ=/データ ...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

CentOS 6.6 ソースコードのコンパイルと MySQL 5.7.18 のインストールチュートリアルの詳細な説明

1. ユーザーとグループを追加する1. mysqlユーザーグループを追加する # グループ追加mys...

MySQL 5.7.18 winx64 のインストールと設定方法のグラフィックチュートリアル

圧縮パッケージのインストールは、mysql-5.7 以降、大幅に変更されました。この記事では、mys...

Linuxはjoin -a1を使用して2つのファイルを結合します

次の2つのファイルを結合するには、それらを結合して1.txtに結合します。 # 1.txt ジェリー...

Angularルーティングアニメーションと高度なアニメーション機能の詳細な説明

目次1. ルーティングアニメーション2. グループクエリとスタガー1. ルーティングアニメーションル...

無効と読み取り専用の機能と違い

1: readonly は、このコントロールをロックして、インターフェイス上で変更できないようにしま...

包括的なウェブサイト評価ソリューション

<br />「XXXのウェブサイトを見てみませんか?」といった質問をされることもあります...

Dockerにおけるコンテナとイメージの違いについてお話ししましょう

鏡とは何ですか?イメージは、複数のイメージ レイヤー (UnionFS および AUFS ファイル ...

画像カルーセルを実装するためのネイティブJS 小さな広告プラグインを実装するためのJS

最近、ネイティブ JS を使用して、さらにいくつかの小さな機能を実装したいと思っています。現在、ブロ...