スクロールバーが表示されない。Simplebarを使おう！【即解決】 | Kasumiblog

(K)Iphoneでもスクロールバーを表示させて、カスタマイズする方法はWebkitで | Web(K)Campus|Webデザイナーのための技術系メモサイト

iPhoneが発売された初期の頃「スマホにはスクロールバーの概念がない」とあるお方からスマホが出来た頃にそう言われましたが、 「スクロールバーがない=スクロールできない」というわけではなく、バーが見えてないだけで実際はスクロールさせることが出来ます。ですが、iphoneではスクロールバーが表示されないのでユーザビリティーの観点から考えると明らかによくありません。 そんな訳で今回は、iphoneでも見れるスクロールバーを作成してみたので、備忘録。 ※Androidでの実機確認はしてません。iPhoneのiOS7でのみの確認です。旧バージョンで見れる・見れないとかあったらコメント下さいm(_ _)m スクロールしてる間だけスクロールバーを表示 スクロールバーを表示させたいBoxに「-webkit-overflow-scrolling: touch;」を記述するだけです。PCでは何の変化もありませんが、スマホで表示すると、スクロールしてる間だけ、スクロールバーが表示されます。 【HTML】

【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の擬似要素を使ってスクロールバーをデザインする 先ほどのやり方ではスクロールしてる間(スワイプって言うんですかね?

simplebar-scrollbar::before スクロールバーの棒部分装飾. simplebar-track スクロールバーの背景 mplebar-visible::before デフォルトだとスクロールバーに透過がかかっているので、透過を無くしたい場合はopacity: 1;を追加する 以上で完成です。 まとめ SimpleBar の実装方法を紹介しました。 SimpleBar ライブラリを読み込むだけで簡単に自分好みのスクロールバーが実装ができます。 最新のモダンブラウザ及び、様々なデバイスの表示も共通のものを表示してくれるので、とても便利です。 以上で解説を終わります。