スクロールバーを表示するCSS

長めの文章（利用規約とか）を、決まったサイズのスペースにスクロールバーを使ってコンパクトに表示する方法です。

スクロールバー表示例

[adsense]

htmlソースコード

<div class="example">
CSSだけでスクロールバーを表示させる方法です。
スクロールバーが表示されるように、範囲（height,width）を小さめにしています。
</div>

CSSソースコード

div.example {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  overflow-y:scroll;
  font-size:0.8em;
  padding:10px;
  margin-left:3px;
  border:solid 0.5px #f1f1f1;
}
.example::-webkit-scrollbar{ 
    width: 15px;
}
.example::-webkit-scrollbar-thumb{ 
    background: #c1c1c1;
}
.example::-webkit-scrollbar-track-piece:start{
    background: #f1f1f1;
}
.example::-webkit-scrollbar-track-piece:end{
    background: #f1f1f1;
}

スマホでスクロールバーを表示する

CSSソースコードのdiv.example部分だけでも、パソコンはスクロールバーあり、スマホ・タブレットはスクロールバーなしのスクロール表示、になります。

スマホでスクロールバーを表示するために「-webkit-scrollbar」を入れているのですが、「-webkit-overflow-scrolling: touch;」だけでもスクロールバー表示にできます。

「-webkit-overflow-scrolling: touch;」表示例

htmlソースコード

<div class="smfexample">
「-webkit-overflow-scrolling: touch;」を使った場合の表示例です。
パソコンだと見た目変わらず、スマホでみると、スクロールした時だけスクロールバーが表示されます。
ちょっとかっこいい感じです。
</div>

CSSソースコード

div.smfexample {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  overflow-y:scroll;
  font-size:0.8em;
  padding:10px;
  margin-left:3px;
  border:solid 1px #f1f1f1;
  -webkit-overflow-scrolling: touch;
}

「-webkit-scrollbar」の良いところは、スクロールバーそのものががっつり表示され続けるので、「スクロールして読んでくださいね」と分かりやすいことです。