スマホ スクロール バー 表示 されない
Tue, 30 Jul 2024 09:21:30 +0000
jsでスクロールバーの色をCSSで自由に変更する。
(K)Iphoneでもスクロールバーを表示させて、カスタマイズする方法はWebkitで | Web(K)Campus|Webデザイナーのための技術系メモサイト
スクロールバーがPCでは常に表示されているけど、iphone、ipadだとスクロールしないと表示されない。。
このような疑問に答えます! 本記事ではiphone、ipadでもスクロールバーを常に表示する方法について解説します。
以下ソースを追加してスクロールバーにCSSを当てよう。
上記ソースのそれぞれの意味としては以下の通りです。::-webkit-scrollbar スクロールバーのCSS::-webkit-scrollbar-thumb スクロールバー内を移動する棒のCSS
上記CSSを当てることで、iphone、ipadでスクロールバーを出すことができ、尚且つオリジナルのレイアウトに変更することできます! 以上で解説を終わります。
simplebar-scrollbar::before スクロールバーの棒部分装飾. simplebar-track スクロールバーの背景 mplebar-visible::before デフォルトだとスクロールバーに透過がかかっているので、透過を無くしたい場合はopacity: 1;を追加する 以上で完成です。 まとめ SimpleBar の実装方法を紹介しました。 SimpleBar ライブラリを読み込むだけで簡単に自分好みのスクロールバーが実装ができます。 最新のモダンブラウザ及び、様々なデバイスの表示も共通のものを表示してくれるので、とても便利です。 以上で解説を終わります。