jQueryのCustom scrollbarの画像の色はCSSで変更する

このエントリーをはてなブックマークに追加

こんにちは、fujinyoです。
今日は、完全に自分向けの備忘録記事です。

Webサイト上のスクロールバーをおしゃれに変更するjQueryがあります。
Custom scrollbar」です。簡単に実装できます。

背景が明るいページの場合に…

jQueryのCustom scrollbarの画像の色はCSSで変更する

実装方法自体は、他のブログやダウンロードしたZIP内にあるデモにお任せします。
今回ボクが迷ったのは、スクロールバーの矢印部分の色の変更です。

デフォルトだと、矢印は白なので背景の明るいページの場合はよく見えません。
調べてみると、矢印画像はCSSスプライトにて表示しているようなので、まずは対象になっている画像ファイル(mCSB_buttons.png)を確認。

白矢印の他に、黒矢印があるのを確認しました。
さらに、矢印にもいくつかタイプがあるようです。

次に、CSSスプライトを指定しているCSSファイルを見に行きます。
jquery.mCustomScrollbar.cssの162行目に書かれているクラスに上矢印(Upボタン)のCSSが定義されています。

.mCSB_scrollTools .mCSB_buttonUp{
 background-position:-80px 0;
 /* 
 sprites locations are 0 0/-16px 0/-32px 0/-48px 0 (light) and -80px 0/-96px 0/-112px 0/-128px 0 (dark) 
 */
}

さらに、ご親切に165行目にコメントにて明るい系の矢印、暗い系の矢印の設定方法まで書いてくれていますね。上記の指定(-80px 0)だと、標準タイプの矢印の黒色が表示されます。

下ボタンや、左右のボタンも同様に変更できます。
もちろん、自作画像を使うのもありですね。

では、また。

[PR] 「結さん」があなたに代わって開発案件の依頼主を探します

  • 「既存のクライアントにギャラアップは言いにくい」
  • 「営業活動する時間がないし、苦手」
  • 「仕事が途切れたらどうしよう」

ITエンジニアのこんな悩みを「結さん」が解決してくれます
結さんへの無料会員登録後は提案メールを待つだけです!

関連記事

このエントリーをはてなブックマークに追加