overscroll-behavior 、スクロールが発生し、スクロール範囲が境界を超えた場合の要素の動作を制御する CSS のプロパティです。この属性は、特にモバイル デバイスでのユーザー エクスペリエンスを向上させるのに役立ちます。この属性は、ユーザーがスクロール制限に達した要素をスクロールしようとしたときに、デフォルトの「弾む」効果を回避したり、この効果をカスタマイズしたりするために使用できます。
オーバースクロール動作: 自動 | なし。 /* または X 軸と Y 軸に個別に設定*/ オーバースクロール動作-x: 自動 | なし。 オーバースクロール動作 : 自動 | なし。
auto : デフォルト値。この要素はデフォルトのスクロール動作を使用します。ほとんどのブラウザでは、これは、スクロール範囲を超えると、スクロールに「弾む」効果が生じることを意味します (つまり、コンテンツが境界に達した後にわずかに跳ね返ります)。 contain : スクロール チェーンの伝播を防ぎます。指定した要素でスクロールが発生し、要素のコンテンツが範囲外にスクロールした場合、スクロール イベントは要素の親要素に伝播されません。これは、独立したスクロール領域を作成し、不必要なスクロールの競合を回避するのに役立ちます。 none : 「弾む」効果を含む、スクロール時のデフォルトの動作を防ぎます。これは、ユーザーが境界に達した要素をスクロールしようとしても、スクロール効果やアニメーションが表示されないことを意味します。スクロール可能な内部領域 (リストや画像ギャラリーなど) を含むページがあるとします。デフォルトの「弾む」効果を生成せずに、端までスクロールしたときにこの内側の領域を停止させたい場合は、次のように設定できます。
.scrollable-area {
オーバースクロール動作: なし。
高さ: 200ピクセル;
overflow-y: auto; /* Y 軸のスクロールを許可します*/
}この例では、スクロール動作を制御する要素に.scrollable-areaクラスが適用されます。 overscroll-behavior: none;要素の上部または下部にスクロールするときに追加のスクロール効果やアニメーションが表示されなくなります。
注意事項
すべてのブラウザがoverscroll-behavior属性をサポートしているわけではありません。したがって、このプロパティの機能に依存する場合は、適切なテストを行うことをお勧めします。一部のブラウザでは、 overscroll-behavior-xとoverscroll-behavior-yプロパティをサポートしている場合があり、それぞれ水平スクロール動作と垂直スクロール動作を制御できます。ただし、このサポートにも制限があるため、テストも必要です。アクセシビリティとユーザー エクスペリエンスを念頭に置いてユーザー インターフェイスを設計する場合は、この属性を慎重に使用してください。場合によっては、デフォルトのスクロール動作 (「弾む」効果など) の方が、ユーザーにとってより直感的で理解しやすい場合があります。CSS の overscroll-behavior 属性に関するこの記事はこれで終わりです。CSS overscroll-behavior 属性の詳細については、downcodes.com で以前の記事を検索するか、以下の関連記事を引き続き参照してください。 . ダウンコード.com！