CSSスクロールスナップの実裝には、構(gòu)造とプロパティの設(shè)定に注意が必要です。まず、スクロール可能なコンテナを作成し、スクロールスナップタイプを設(shè)定します。次に、子要素にスクロールスナップアライインを追加します。 1.コンテナは、.container {overflow-x：auto;など、オーバーフローとスクロールスナップタイプを設(shè)定する必要があります。 Scroll-Snap-Type：X Tangatory; }; 2。子要素は、.item {scroll-snap-align：start; };巻物の方向は軸（xまたはy）によって決定され、吸著型は必須（強(qiáng)制アライメント）と近接（近接したときに整列）に分割されます。それを使用する場合、パディングを避けるために子供の要素を統(tǒng)合する必要があり、マージンとスクロールパッディングは、水平カードリストなどのレイアウトで動作するように合理的に設(shè)定されます。

CSSスクロールスナップは、特に水平スクロール、ページネーションディスプレイ、またはスクロール位置の正確な制御があるシナリオでは、非常に実用的な機(jī)能です。これにより、ページがスクロール時に特定の場所に「吸う」ことができ、ユーザーエクスペリエンスが向上します。実裝するのは複雑ではありませんが、注意が必要ないくつかの重要なポイントがあります。

基本構(gòu)造とプロパティ設(shè)定

スクロールスナップを使用するには、最初にスクロールできるコンテナが必要です。通常、 overflow: autoまたはoverflow: scrollセット。次に、このコンテナにscroll-snap-type屬性を追加して、このコンテナのスクロール挙動に吸著効果があることをブラウザに伝えます。

例えば：

 。容器 {
  オーバーフローX：自動;
  Scroll-Snap-Type：X Tangatory;
}

上記のコードは次のとおりです。この容器は水平方向にスクロールすることができ、スクロール時に子要素に吸著する必要があります。

各子要素（つまり、停止したいブロック）も、次のようなscroll-snap-align屬性を追加する必要があります。

 。アイテム {
  Scroll-Snap-align：start;
}

このようにして、ブラウザは、要素をコンテナの開始位置に整列する必要があることを知っています。

ローリング方向と吸著タイプの選択

scroll-snap-typeの値は、軸（xまたはy）とタイプ（必須または近接性）の2つの部分で構(gòu)成されています。

• 軸：水平スクロールが有効かどうかを決定します。
• タイプ：
  • mandatory ：ユーザーがスクロールを停止する限り、最も近い吸著點(diǎn)は整列を余儀なくされます。
  • proximity ：ローリングアクションが吸著點(diǎn)に遅くなったり近い場合にのみ自動的に吸著します。そうしないと、通常のスクロールのようになります。

たとえば、フルスクリーンの垂直スクロールWebサイトを作成する場合は、 scroll-snap-type: y mandatory;すべてのスワイプが完全なセクションで停止するようにします。

高速スライドエクスペリエンスに焦點(diǎn)を當(dāng)てた水平スクロールカードの場合、スクロールをより自然にするためにproximity使用する方が適している場合があります。

子どもの要素の配置とスタイルに関するメモ

スクロールスナップは、使用するいくつかの屬性を追加するだけであるように思われますが、実際の開発では、いくつかの「奇妙な」?fàn)顩rに遭遇します。たとえば、時々、転がることが予想される位置で行われない場合、または吸著がずれている場合があります。

これは、子どもの要素の一貫性のないサイズ、間隔、またはパディング設(shè)定によって引き起こされることがよくあります。

いくつかの提案：

• 吸著計算に簡単に影響する可能性があるため、コンテナに自由にpaddingを追加しないでください。
• 子要素の幅/高さは、特に水平にスクロールする場合は、 .item { width: 100%; }または固定値。
• マージンを使用して子要素を分離する場合は、 scroll-paddingで容器を補(bǔ)正することを検討してください。
• FlexBoxまたはグリッドで子要素を配置するときは、スクロール動作を変更する可能性があることに注意してください。

たとえば、各カードの間に20px間隔で水平にスクロールされたカードリストがある場合、次のように処理できます。

 。容器 {
  ディスプレイ：Flex;
  オーバーフローX：自動;
  Scroll-Snap-Type：X Tangatory;
  スクロールパッディング：0 20px;
}

。アイテム {
  フレックス：0 0 Calc（100％-20px）;
  マージン右：20px;
  Scroll-Snap-align：start;
}

これにより、マージンによるアライメントオフセットが回避されます。

基本的にそれだけです。 CSSスクロールスナップ動作を?qū)g裝する鍵は、明確な構(gòu)造、統(tǒng)一スタイル、および関連屬性の合理的な使用です。シンプルに見えますが、注意を払わなければ問題を引き起こすのは簡単です。

以上がCSSスクロールスナップ動作の実裝の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。