CSS - オーバースクロールの動作: 初心者向けガイド

こんにちは、未来のCSS魔法使いさんたち！今日は、CSSのオーバースクロール動作の面白い世界に踏み出します。これまでコードを書いたことがない方も心配しないでください - 私があなたの親切なガイドとして、このトピックを一緒に少しずつ探求します。では、仮想のバックパックを持ち出して、潜りましょう！

CSS - Overscroll

オーバースクロール動作とは？

本題に入る前に、まずオーバースクロール動作とは何かを理解しましょう。スマホのウェブページをスクロールして最後に達すると、バウンドするような動作をする経験はありませんか？那就是オーバースクロールの動作です！本を読んで最後のページをめくる時、次のページに進むちょっとした抵抗を感じるのと同じです。CSSのoverscroll-behaviorは、このような状況でのウェブページの動作を制御するものです。

可能な値と構文

では、overscroll-behaviorに使用できる異なる値と、CSSにどのように記述するかを見てみましょう。以下の表で要約します：

値	説明
auto	デフォルト動作 - スクロールが次の要素に「漏れ」ることを許可
contain	スクロール連鎖を防ぐが、バウンス効果を許可
none	スクロール連鎖とバウンス効果の両方を防ぐ

基本的な構文は以下の通りです：

要素 {
overscroll-behavior: 値;
}

いくつかの例で詳しく説明しましょう！

例 1: デフォルト動作 (auto)

body {
overscroll-behavior: auto;
}

これはデフォルト設定です。本をテーブルの上に置くようなもの - 通常のスクロールとバウンスが期待通りに動作します。

例 2: スクロールを保持 (contain)

.scrollable-element {
overscroll-behavior: contain;
}

ウェブページ内にスクロール可能なdivがあるとします。'contain'は、章节の最後にブックマークを挟むようなものです。その章节内でページをめくることはできます（バウンス効果），でも次の章节に勝手に進むことはありません（スクロール連鎖を防ぐ）。

例 3: オーバースクロール効果なし

.modal {
overscroll-behavior: none;
}

これは、本のページを最後に達してからめくることができないように貼り付けるようなものです。スクロールやバウンスは一切ありません。

適用範囲

さて、どこでこのクールなプロパティを使用できるのか、と疑うかもしれません。すべての要素に適用できますが、特に以下の場面で便利です：

body要素
スクロール可能なコンテナ（例えば、overflow: scrollを持つdiv）

CSS overscroll-behavior - 値の比較

実際のシナリオでこれらの値を比較してみましょう。スクロール可能なサイドバーとメインコンテンツエリアを持つウェブページを設計しているとします。

<div class="sidebar">
<!-- サイドバーのコンテンツ -->
</div>
<div class="main-content">
<!-- メインコンテンツ -->
</div>

.sidebar {
height: 100vh;
overflow-y: scroll;
overscroll-behavior: contain;
}

.main-content {
overscroll-behavior: auto;
}

この例では、サイドバーは独自のスクロール動作を保持しますが、メインコンテンツは通常動作します。サイドバーがミニブックで、メインコンテンツがメインブックのようなものです - ミニブックをめくることはできますが、メインブックには影響を与えません。

CSS overscroll-behavior - 二つのキーワード値

overscroll-behaviorには二つの値を使用できることをご存知ですか？縦スクロールと横スクロールに対して別々の指示を与えるようなものです。

要素 {
overscroll-behavior: 縦の値 横の値;
}

例えば：

.custom-scroll {
overscroll-behavior: contain auto;
}

これはブラウザに縦スクロールを保持し、横スクロールを通常動作にするよう指示します。本を縦方向にめくることができないが、横方向に回転できるようなものです！

CSS overscroll-behavior - 関連プロパティ

overscroll-behaviorにはCSSの家族がいます。お会いしましょう：

overscroll-behavior-x: 横スクロールの動作を制御
overscroll-behavior-y: 縦スクロールの動作を制御

これらは、CSSのツールボックスの特殊なツールのようなものです。精密な制御が必要なときに役立ちます。

.horizontal-scroll {
overscroll-behavior-x: contain;
}

.vertical-scroll {
overscroll-behavior-y: none;
}

この例では、横スクロールを保持し、縦スクロールを完全に防ぎます。パノラマ写真の本で、横方向にスクロールできるが縦方向にはできないようなものです！

実用的な応用: モーダルの例

実際の例で知識を活かしてみましょう - モーダルウィンドウです。

<div class="page-content">
<!-- メインページのコンテンツここに -->
</div>
<div class="modal">
<div class="modal-content">
<!-- モーダルのコンテンツここに -->
</div>
</div>

.page-content {
height: 2000px; /* スクロール可能な長いコンテンツ */
}

.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
overscroll-behavior: contain;
}

.modal-content {
background-color: white;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain;
}

この例では、モーダルがメインコンテンツの上に重ねられます。モーダルとそのコンテンツの両方にoverscroll-behavior: containを設定することで、モーダル内のスクロールがメインページに影響を与えず、モーダル内に保持されることを確保します。

結論

そして、ここまで、私愛する学生们！CSSのオーバースクロール動作の土地を旅しました。基本概念から実用的な応用までです。思い出してください、本のように、CSSをマスターするには時間と練習が必要です。実験をし、間違えても構いません - それが私たちが学び成長する方法です。

CSSの冒険を続ける中で、このオーバースクロール動作の知識を背中に持っておきましょう。小さな詳細に見えるかもしれませんが、これがウェブデザインを良いものから素晴らしいものにする重要な要素です。

幸せなコーディングを、そしてスクロールは常にスムーズに！

Credits: Image by storyset