. BLOG 技術記事
BLOG 技術記事
BLOG 技術記事

BLOG 技術記事

コンテンツ内（要素内）でのスクロールを作成・制御する方法【overflowプロパティ】 2024.5.10
  • CSS
  • js/jQuery
SHARE

目次

  • 1 はじめに
  • 2 コンテンツ内スクロールの事例
    • 2.1 ハンバーガーメニュー
    • 2.2 縦スライドのコンテンツ
    • 2.3 横スライドのコンテンツ
    • 2.4 ブラウザのスクロールバーアレンジ
    • 2.5 スクロールをピタッととめるスクロールスナップ
  • 3 プロパティのまとめ
    • 3.1 コンテンツ内のスクロールの作成・制御、コンテンツの表示・非表示
    • 3.2 スクロールバーのアレンジ
    • 3.3 スクロールスナップ
  • 4 まとめ

はじめに

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

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

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

要素内のスクロールの事例や具体的な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-widthhttps://caniuse.com/?search=scrollbar-width

・scrollbar-colorhttps://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-xx軸方向への表示方法の設定visible・・・初期値hidden・・・溢れたものを非表示scroll・・・スクロールを作成overflow-yy軸方向への表示方法の設定overflowoverflow-x、yを一括指定 スクロールバーのアレンジ プロパティ名説明値scrollbar-widthバーの表示を変更auto・・・初期値none・・・無しthin・・・細めscrollbar-colorバーの色を変更auto・・・初期値2つの値・・・先頭＝スクロールバーの動く部分後ろ＝スクロールバーの背景 擬似要素名説明命令するプロパティ例::-webkit-scrollbarスクロール領域である要素に追加し、スクロールバーの背景を設定するwidthbackground-colorborderborder-radiusnoneなど::-webkit-scrollbar-thumbスクロール領域である要素に追加し、スクロールバーの動く部分を設定する スクロールスナップ プロパティ名説明値scroll-snap-typexとy、それぞれの軸の方向へスクロールする際の挙動を設定x mandatory・・・x軸方向にピタッと移動y mandatory・・・y軸方向にピタッと移動x proximity・・・x軸方向にある程度スクロールしたらピタッと移動するy proximity・・・y軸方向にある程度スクロールしたらピタッと移動するscroll-snap-align次のコンテンツのどの位置に移動させるかを指定するstart・・・開始位置center・・・真ん中end・・・終了位置

まとめ

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

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

こちらの記事はいかがでしたか？ +1 0 +1 0 +1 0 +1 1 Facebook Twitter Email Related posts

【CSS】プロパティ・値・単位の一覧　基礎〜応用

スクロールアニメーションに革命！CSSだけで実装する方法を解説します【JavaScriptなし】

【2025年最新版】コンテナクエリについて / メディアクエリとの違い〜文法までを紹介

【サンプルあり】スクロールに連動した要素やマスクのサイズ変更【JavaScript / jQuery】

TWEET
  • PREV
  • BACK
  • NEXT

RECENT ENTRIES

  • Web制作会社がAIを導入して変わったこと｜実例付きメリット・デメリット
  • 【ローカルWordPress】https://localhost に勝手にリダイレクトされる原因と解決法｜SSLエラー「ERR_SSL_PROTOCOL_ERROR」の直し方
  • GEO・SGEとは？SEOとの違い | 導入方法や効果など徹底紹介
  • コーディング不要でハンバーガーメニュー作成！「Hamburger Menu Generator」の使い方と特徴を徹底解説

【Hamburger Menu Generator】ハンバーガーメニュー生成ツール

CATEGORIES

  • AI × Web制作
  • CSS
  • js/jQuery
  • Photoshop/Xd
  • Sass
  • Wordpress
  • ウェブ解析
  • その他
  • デザイン
📎📎📎📎📎📎📎📎📎📎