人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ブラウザのスクロールバーのデザインを変更したいです。
色を変えるのや立体感を消したりとかはできるようですが、自分で用意した画像にすることは出来ませんか?
HTML+CSSで出来ればベター、無理ならJavaScriptまでは使います。
Flashは無しで。

対応ブラウザはIE6.0 Firefox1.5以上が必須、出来れば最新のOperaとSafari。

よろしくお願いします。

●質問者: router
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS Flash HTML IE6 JavaScript
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ufomap
●0ポイント

スクロールバーはCSS(スタイルシート)で指定されています。

ただし、ブラウザによっては反映されないブラウザもあります。

色の指定は閲覧者が見やすいカラーにする必要がありますので注意して下さい。

Tagland [HTML&StyleSheet解説]

http://tagland.net/index.html

ここを参考にするとよいです。自動スクロールバー制作機みたいなのもあり解説も詳しいです。

スクロールバーの色を指定する

http://tagland.net/css/css11/css11_05.htm

http://tagland.net/menu_css1.htm

トップページ以外はフレームで制作されていますので

トップページ以外はフレームページしか表示されません。

◎質問者からの返答

残念ながら色を変えたり立体感を消したりする方法は分かります。

質問内容は、スクロールバーを自分で用意した画像にする方法です。


2 ● fragarach
●25ポイント

スタイルシートのみでやるなら、こんな感じ。

http://ako.x0.com/java/scrollbg.html

でも基本的にスクロールバー関連のスタイル指定はIE限定なので、Firefox対応というのは無理です。そしてIEについても、スクロールバーを透過させて背景画像を表示するという、間接的な方法になります。

  1. ページ全体の背景に使いたい画像を指定
  2. 右端にだけ表示されるようにするか、色指定で上書き
  3. スクロールバーには適当な色(他で使わないような色)を指定
  4. filter:chroma(color=スクロールバーに指定した色);

javascriptでやろうと思えば可能かもしれませんが、ウィンドウ自体のスクロールバーを画像にするのは相当複雑なことをしなきゃいけないっぽいです。自分には底までの技術はありません。

http://www.din.or.jp/~hagi3/JavaScript/JSTips/DHTML/External/Scr...

知識があるなら、この辺が参考になるかも。

◎質問者からの返答

ありがとうございます。

各ブラウザの実装状況がそのようですと、JavaScriptで何とかするのが良さそうですね。

JavaScriptの方面でもう少し情報をお待ちします。

よろしくお願いします。


3 ● susie-t
●55ポイント ベストアンサー

自作してみました。

dummyscrollbar.lzh

ただ、縦スクロールバーのみで、横が表示されなくなってしまうのですが;; 処理も重いです。私のPCでIE6だと、スクロールするたびに砂時計が表示されます。。。

すみませんがFirefox1.5、Safariは未確認です。(Firefox2.0は確認)

横スクロール対応版は完成したらコメント等でお知らせします。(ちょっとかかりそうです・・・)

◎質問者からの返答

ご回答、というか自作ありがとうございます。

これはちょっと予想していなかったので驚きですが、確かにスクロールバーに画像が使えてますね。

横スクロール対応などは、人力検索はてなの回答の範疇を超えた労力がありそうなので、無理はしないでください。

dummyscrollbar.lzhのほうはとても参考になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ