javascriptでの独自スクロールボタン作成

質問

IEで通常のスクロールバーは非表示にし、javascriptでjQueryを使用せずに、
上下ボタンおよびスクロールバーを作成することは可能でしょうか？

また可能な場合、どのような方法で作成できるかご教授いただきたく思います。

この作成にあたってはhtmlの親子関係やテキストボックスを使用しない場合の
ボタン作成を想定しています。

回答No.1

fujillin · ベストアンサー

可能でしょう。

高さ方向のスクロールと仮定して
1）対象の高さ、表示部分の高さなどを取得
2）対象を、overflow:hiddenに設定
3）スクロールが必要ならスクロールバーを表示
　・高さの関係からバー内の表示部分のサイズ・位置を決定
　・矢印マークやバーを表示
　・バー等をクリックした場合の処理を作成しておく

縦横なら、それぞれに処理を行うことになるでしょう。
バーや矢印は画像を用意しておくか、キャラクターを利用して表示するか…

＞jQueryを使用せずに、～～作成することは可能でしょうか？
jQueryはjavascriptなので、利用してできることは利用しなくても記述が可能です。

回答No.3

神崎 渉瑠（@taloo）

忘れてました。
色の変更程度なら、CSSのスクロールバー指定をサポートしているブラウザでスクロールバーの色が変えられます。
http://www.tagindex.com/stylesheet/page/scrollbar_color.html

回答No.2

神崎 渉瑠（@taloo）

スライドバーを作成して、そのスライドバーの位置（値）に合わせてスクロールさせたい要素のscrollTopやscrollLeftを変更すれば良いです。
http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0023
スクロールさせたい要素はブラウザ標準のスクロールバーを表示させないように、overflow: hiddenを指定してください。

実装そのものは比較的簡単なのにスライドバー（独自のスクロールバー）が使われない理由は、
（スクロールバーをデザインする手間という理由もあるかもしれませんが、本文のアニメーションに比べれば"おまけ"にもなりませんし）
スライドバーの変更は特に色覚異常者にとってスクロールバーが見えなくなるというアクセシビリティー違反になるためですが、
最近ではマウスのスクロールホイールが標準でありますし、そこまで気にする必要はないかもしれません。
WebkitやGeckoのように普段スクロールバーが表示されていないブラウザも多いですし。

なお、色覚異常の人口比率は、欧米（目の色が青）では20%前後、日本（目の色が黒）では男性5%女性2%という報告があります。
（つまり一般的にシェアが少なくて対応を切り捨てられるブラウザの利用率よりも多いです。）

また、スクロールバーが標準でない場合、それがスクロールバーと認識されない可能性も比較的高いようです。
（背景画像、デザインや、何かのボタンと見なしてクリックするけど、何も反応がないのでそれ以上何もしない。ユーザビリティーの低下、無意味なデザイン。）

もしアクセシビリティーを気にされるなら、色の使い方に気をつけてください。