はじめに

今回は、コンテンツ内（要素内）でスクロールを作成したり、スクロールを制御する方法についてお話していきます。

例えばニュースやプライバシーポリシーのようにページ内の一部でさらに細かくスクロールできるコンテンツを作ったり、
あるいはハンバーガーメニューを開いたときに画面のスクロールを制御する方法などです。

また、左の例でも使われているブラウザの「スクロールバー」は通常デフォルトのデザインのまま使用するケースが多いですが、
実はサイトのデザインに合わせてアレンジを加えることが可能です！

要素内のスクロールの事例や具体的なCSSの記述内容、また注意点を紹介しつつ、
必要となるCSSプロパティもまとめていきたいと思います。

コンテンツ内スクロールの事例

ハンバーガーメニュー

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

今や当たり前のように実装されているハンバーガーメニューですが、
スクロールの設定をしっかり理解しておくことで、より使いやすいものにすることができます。
上の例ではボタンをクリックしてハンバーガーメニューを開いたときにコンテンツをスクロールしないように設定しています。

記述のポイントは、メニューを開いたときに、bodyに対してoverflow:hiddenを命令するという点です。（jQueryでtoggleClassを使いクラスの付与・削除を切り替えています）
こうすることでbody要素からはみ出た要素は表示されない＝スクロールを制御できることになります。

縦スライドのコンテンツ

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

例えばプライバシーポリシーやニュースなど、ページの中でさらに細かくスクロールするコンテンツを作るケースです。

記述のポイントは、クラスinnerにあらかじめ高さを設定しておき、その上で「overflow-y: scroll;」の命令を出すという点です。
こうすることで高さをオーバーしたテキストはスクロールをして表示ができるようになります。

また、スクロール領域の周りに余白をつける、または角丸の枠線をつける場合などはHTMLに工夫が必要です。
上の例のクラスinnerをさらにクラスwrapをつけたdivで囲み、そこに対して高さの設定や余白、枠線の設定などを行うことで、
枠内にスクロール領域を含めることができます。

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

横スライドのコンテンツ

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

例えば商品の比較など複数のコンテンツを横に並べてスクロールさせることも可能です。
パソコンで横並びにしていたコンテンツをタブレットやスマホでも同様の見せ方をしたい場合によく使われます。

記述のポイントは、クラスinnerに対して「overflow-x: scroll; 」を命令し、指定した領域の横幅からはみ出た要素をスクロール表示させているところです。
またdisplay:flexで並べた要素をjustify-content: flex-start; で左揃えにすることで、左端のコンテンツからきれいに表示されるようになっています（値にcenterなどを入れると表示が崩れてしまうのがわかるかと思います）

ブラウザのスクロールバーアレンジ

WEBサイトのデザインに合わせてスクロールバーの色合いや横幅、角丸などをカスタムすることも可能です。

記述方法としては2通りあり、
ひとつはスクロールの領域を指定している要素にCSSプロパティで命令を出す方法、
もうひとつは同様の要素に擬似要素を加える方法です。
2024年5月現在、ブラウザごとに命令の方法を変える必要があるため注意しましょう。

1.CSSプロパティで命令を出す方法（※Safariは不可）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

scrollbar-widthプロパティで横幅を設定することができます。
値はnone（無し）・thin（細め）・auto（自動）のみとなり、具体的な数値を設定することはできません。

さらに、scrollbar-colorプロパティで色合いを変更します。
値を2つ入れることで、先頭の値はスクロールバーの動く部分の色、後ろの値はスクロールバーの背景色を設定することができます。

また、CSSプロパティで命令を出す場合は角丸表現を行うことができないためそちらも注意しましょう。

各ブラウザの対応状況は以下をご覧ください。

・scrollbar-width
https://caniuse.com/?search=scrollbar-width

・scrollbar-color
https://caniuse.com/?search=scrollbar-color

2.擬似要素を使う方法（※Firefoxは不可）

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

擬似要素にも2種類あり、
ひとつはスクロールバーの背景の命令を出すための「::-webkit-scrollbar」、
もうひとつはスクロールバーの動く部分の命令を出すための「::-webkit-scrollbar-thumb」です。

擬似要素はCSSプロパティでの命令とは異なり、スクロールバーの横幅や角丸表現などを自由に設定することができます。

スクロールをピタッととめるスクロールスナップ

See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.

この事例のような、スクロール時に次のコンテンツ位置までスッとジャンプできるような設定をスクロールスナップといい、CSSで設定することができます。
画面の高さいっぱいにコンテンツを表示しておくことでダイナミックな印象になりますよね。

記述のポイントは、スクロールスナップの効果をつけたい親要素に対してscroll-snap-typeプロパティを設定し、
子要素に対してscroll-snap-alignプロパティを設定していきます。

上記の例では、
親要素にscroll-snap-type: y mandatory;と命令することでy軸方向に次のコンテンツの位置までピタッと表示させ、
子要素にscroll-snap-align: start;と命令し、次に表示させるコンテンツの先頭が見えたらそのコンテンツまでピタッと移動させるようになっています。

さらに、CSSプロパティであるscrollbar-width: none;　もしくは　擬似要素である::-webkit-scrollbarを追加することで、
スクロールバーを非表示にすることも可能です。　

プロパティのまとめ

ここまでの内容で登場したCSSプロパティをまとめていきます！

コンテンツ内のスクロールの作成・制御、コンテンツの表示・非表示

プロパティ名	説明	値
overflow-x	x軸方向への表示方法の設定	visible・・・初期値 hidden・・・溢れたものを非表示 scroll・・・スクロールを作成
overflow-y	y軸方向への表示方法の設定
overflow	overflow-x、yを一括指定

スクロールバーのアレンジ

プロパティ名	説明	値
scrollbar-width	バーの表示を変更	auto・・・初期値 none・・・無し thin・・・細め
scrollbar-color	バーの色を変更	auto・・・初期値 2つの値・・・ 先頭＝スクロールバーの動く部分 後ろ＝スクロールバーの背景

擬似要素名	説明	命令するプロパティ例
::-webkit-scrollbar	スクロール領域である要素に追加し、スクロールバーの背景を設定する	width background-color border border-radius none など
::-webkit-scrollbar-thumb	スクロール領域である要素に追加し、スクロールバーの動く部分を設定する

スクロールスナップ

プロパティ名	説明	値
scroll-snap-type	xとy、それぞれの軸の方向へスクロールする際の挙動を設定	x mandatory・・・x軸方向にピタッと移動 y mandatory・・・y軸方向にピタッと移動 x proximity・・・x軸方向にある程度スクロールしたらピタッと移動する y proximity・・・y軸方向にある程度スクロールしたらピタッと移動する
scroll-snap-align	次のコンテンツのどの位置に移動させるかを指定する	start・・・開始位置 center・・・真ん中 end・・・終了位置

まとめ

今回の記事を通して、よりユーザーにとって利便性が高く、また効果的なデザインを作るきっかけになればとても嬉しいです！

STUDIO NNCではコーディングパートのみの部分的なお手伝いはもちろん、WEBサイトのコンセプト設計からワードプレス構築まで一貫した制作を得意としております。
ご相談がございましたら、お気軽にお問い合わせフォームよりお問い合わせください！