WEB系キャンパス

(K)iPhoneでもスクロールバーを表示させて、カスタマイズする方法はWebkitで

sp_scroll_top

iPhoneが発売された初期の頃「スマホにはスクロールバーの概念がない」とあるお方からスマホが出来た頃にそう言われましたが、
「スクロールバーがない＝スクロールできない」というわけではなく、バーが見えてないだけで実際はスクロールさせることが出来ます。ですが、iphoneではスクロールバーが表示されないのでユーザビリティーの観点から考えると明らかによくありません。
そんな訳で今回は、iphoneでも見れるスクロールバーを作成してみたので、備忘録。
 

※Androidでの実機確認はしてません。iPhoneのiOS7でのみの確認です。旧バージョンで見れる・見れないとかあったらコメント下さいm(_ _)m

スクロールしてる間だけスクロールバーを表示

スクロールバーを表示させたいBoxに「-webkit-overflow-scrolling: touch;」を記述するだけです。PCでは何の変化もありませんが、スマホで表示すると、スクロールしてる間だけ、スクロールバーが表示されます。

【HTML】

<div class="text_box">
タラタラ長い文章<br>
タラタラ長い文章<br>
タラタラ長い文章<br>
タラタラ長い文章<br>
     ・
     ・
     ・
</div>

【CSS】

.text_box{
height: 350px;
width: 90%;
padding: 10px;
border: 1px solid #CCC;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

viewportの設定で、スマホでも横幅いっぱいに表示させてるんで、右側にちょっと空きを作るため「width:90%;」を指定指定しています。理由はそれだけです。当然ですが、「高さの指定」と「overflow: scroll;」を設定しないとスクロール領域が出ませんのでご注意を。

 

※DEMOはスマホで確認して下さい。PCで見てもただのスクロールバーです

DEMO

これはiOS7以下の場合はどうなんでしょう？表示されっぱなしなんですかね？

CSSの擬似要素を使ってスクロールバーをデザインする

先ほどのやり方ではスクロールしてる間（スワイプって言うんですかね？）しか、スクロールバーが表示されないので、ユーザビリティーで考えると不完全です。
なので、CSSの擬似要素を使って、表示＆デザインさせます。
 

スクロールバーに関する各パーツの擬似要素は以下

::-webkit-scrollbar    /*スクロールバー全体*/          
::-webkit-scrollbar-button      /*ブラウザによって違いますが上下の矢印*/
::-webkit-scrollbar-track       /*スクロールバーのある部分*/
::-webkit-scrollbar-track-piece      /*スクロールバーが表示されてない部分*/
::-webkit-scrollbar-thumb      /*スクロールバー本体*/ 
::-webkit-scrollbar-corner      /*角のとこ*/     
::-webkit-resizer                    /*角のとこ*/

この擬似要素にさらに下記の擬似クラスセレクタで設定していきます。

:horizontal
:vertical
:decrement
:increment
:start
:end
:double-button
:single-button
:no-button
:corner-present
:window-inactive

上記2つのコードを元に下記のプロパテイを設定していきます。

  • 右のスクロールバー全体を「::-webkit-scrollbar」
  • 右のスクロールバー本体を「::-webkit-scrollbar-thumb」
  • 右のスクロールバーの上の空白を「::-webkit-scrollbar-track-piece :start」
  • 右のスクロールバーの下の空白を「::-webkit-scrollbar-track-piece :end」
.text_box{
     height: 350px;
     width: 80%;
     padding: 10px;
     border: 1px solid #CCC;
     overflow: auto;
}

.text_box::-webkit-scrollbar{ /* スクロールバー全体 */
    width: 15px;
}

.text_box::-webkit-scrollbar-thumb{ /* スクロールバーのある部分 */
    background: #F70841;
    border-radius: 10px;
}
.text_box::-webkit-scrollbar-track-piece:start{ /* スクロールバーが表示されてない部分（前） */
    background: #ffa5ba;
}
.text_box::-webkit-scrollbar-track-piece:end{ /* スクロールバーが表示されてない部分（後ろ） */
    background: #ffa5ba;
}

今回は、左右のスクロールバーはナシなので「overflow:auto;」を設定して、左右のスクロールバーを消してます。
「border-radius」で角丸にして、「background」で色の変更をしてるだけです。

 

※DEMOはスマホ、Chrome、Safariで確認して下さい。Firefoxだとただのスクロールバーです。

DEMO

今回参考にさせてもらったサイト様

まとめ

あまりガッツリ設定できませんし、PCブラウザでのスクロールバーは、個人的にはデフォルトで十分かなと思ってますが、iPhoneなどのスマホメインのサイトの場合こういう細かい気配りも大事なのかなと思います。
ですが、ガッツリ出来ないぶん、コードを保管しておけばすぐに対応させれるので、僕のEvernoteには「スクロールバーデザイン変更」のノートは保管されてます(・∀・)
 

自分的には、PCは普通のを表示させて、スマホのみデコったスクロールバーを表示させるのがベストかと思います。今回は以上ですm(_ _)m

【2019年3月31日追記】
※Javascriptで装飾すれば、ほとんどのブラウザで対応可能です。
【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。

こちらの記事もあわせてどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です