左坊のメモ帳

WordPress など

*

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

   

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

スクロールバー表示例

CSSだけでスクロールバーを表示させる方法です。
スクロールバーが表示されるように、範囲(height,width)を小さめにしています。

スポンサーリンク

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;」表示例

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

 - CSS・html