iframeや cssのoverflow:scroll なんかでコンテンツをスクロールできるようにすると、スマホやタブレットのブラウザではスクロールバーが表示されていない場合があります。
タップしたときだけ一瞬表示されるのに、触っていないと表示されない。
これじゃあユーザビリティ的に良くない、ということであえてスクロールバーをcssで表示させる技。
HTML
<div class="scroll"> ここにコンテンツが入ります。とりあえずいつでもスクロールバーが出るようにしたいです。 </div>
css
.scroll{overflow-y:scroll;}
.scroll::-webkit-scrollbar{width:3vmin;}/*バーの太さ*/
.scroll::-webkit-scrollbar-track{background:#dddddd;}/*バーの背景色*/
.scroll::-webkit-scrollbar-thumb{background:#2cc2e4;}/*バーの色*/