https://idea-hack.com/blog/50126/
ブラウザごとにスクロールバーの表示をコントロールする12の即席コード

ブラウザごとにスクロールバーの表示をコントロールする12の即席コード

スクロールバーをカスタマイズする際、ブラウザ事に指定方法が異なるため、作業自体が面倒です。 なので、簡単に反映できるようにブラウザ別に即席コードをまとめてみました。

WEBページを作成する際に面倒なことの一つが「スクロールバー」のスタイル設定です。

スクロールバーはブラウザ事にスタイルのルールが異なるため、注意が必要です。

今回は、ブラウザ別にスクロールバーを非表示にする方法をまとめました。

KAZUKI
ブラウザ別の挙動なので、全てのコードを確認する場合は、全てのブラウザを開いて確認してくださいね。

ChromeとSafariに関するスクロールバー設定

ChromeとSagariはその他のブラウザと比べて、設定できることが多いです。

例えばスクロールバーの背景色を変えたり、非表示にしたり、グラデーションの適用などもできます。サンプルコードを紹介します。

スタイル適用前

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-1">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-1 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-1 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 1

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-2">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-2 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-2::-webkit-scrollbar {
  background-color: #ccc;
}
.scrollbar-2::-webkit-scrollbar-thumb {
  background-color: #76838d;
}
.scrollbar-2 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 2

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-3">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-3 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-3::-webkit-scrollbar {
  background-color: #ccc;
}
.scrollbar-3::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #74abdc;
}
.scrollbar-3 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 3

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-4">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-4 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-4::-webkit-scrollbar {
  background-color: #ccc;
}
.scrollbar-4::-webkit-scrollbar-thumb {
  background-color: #74abdc;
  border: 2px solid #76838d;
}
.scrollbar-4 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 4

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-5">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-5 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-5::-webkit-scrollbar {
  height: 6px;
  background-color: #ccc;
}
.scrollbar-5::-webkit-scrollbar-thumb {
  background-color: #74abdc;
}
.scrollbar-5 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 5

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-6">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-6 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-6::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}
.scrollbar-6::-webkit-scrollbar {
  background-color: #ccc;
}
.scrollbar-6::-webkit-scrollbar-thumb {
  background-color: #74abdc;
}
.scrollbar-6 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 6

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-7">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-7 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-7::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}
.scrollbar-7::-webkit-scrollbar {
  background-color: #ccc;
}
.scrollbar-7::-webkit-scrollbar-thumb {
  background-color: #74abdc;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent));
}
.scrollbar-7 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 7 (スクロールバー非表示)

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-8">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
CSS
.scrollbar-8 {
  background: #F5F5F5;
  overflow-x: auto;
}
.scrollbar-8::-webkit-scrollbar {
  display: none;
}
.scrollbar-8 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

IE とEdge に関するスクロールバー設定

IEとEdgeでは、スクロールバーを非表示にすることが出来ます。

Pattern 1 (スクロールバー非表示)

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-9">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
  </div>
</div>
CSS
.scrollbar-9 {
  background: #F5F5F5;
  overflow-x: auto;
  -ms-overflow-style: none;
}
.scrollbar-9 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 2

カーソルが乗るとスクロールバーが表示され、離れて少し経つと非表示になります。

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-10">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
  </div>
</div>
CSS
.scrollbar-10 {
  background: #F5F5F5;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.scrollbar-10 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Firefox に関するスクロールバー設定

Firefoxの設定も独特です。サンプルコードを表示していきます。

Pattern 1 (非表示)

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-11">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
  </div>
</div>
CSS
.scrollbar-11 {
  background: #F5F5F5;
  overflow-x: auto;
  scrollbar-width: none;
}
.scrollbar-11 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

Pattern 2

Output
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.
HTML
  <div class="scrollbar-12">
    <div class="force-overflow">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</div>
  </div>
</div>
CSS
.scrollbar-12 {
  background: #F5F5F5;
  overflow-x: auto;
  scrollbar-width: thin;
}
.scrollbar-12 .force-overflow {
  min-width: 2000px;
  padding: 10px;
}

まとめ

ブラウザ事に挙動が違うため、スクロールバーの見た目を全ブラウザで共通にするには、非表示にするか、デフォルトのままにするしかありません。

スクロールバー自体の機能が損なわれるわけではないので、ブラウザごとに別のデザインを適用するのもありです。

ChromeとSafariのシェア
71%

日本ではChromeとSafariの利用者数が7割を超えるため、Webkitを中心にデザインを指定して、他のブラウザは「スクロールが出来る」という機能面だけ重視するのがベストプラクティスでしょう。

紹介しているもの以外のプロパティなどあったら、コメントで教えていただけると嬉しいです。

コメントを残す