IEのスクロールバーの色変更について

###前提・実現したいこと

IEに表示されているスクロールバーの色を、スクロール量によって変更していきたいです。

###発生している問題・エラーメッセージ

スクロールバーの色を変更する方法については、前回の質問を参考にし、
ツール>インターネットオプション>ユーザ補助>ユーザスタイルシートより
CSSファイルをはさむことによって対応できています。
ここから一定量スクロールするごとに追加で色の変更を行って生きたいのですが、
調べても方法が分かりませんでした。
Webページを更新せずにCSSを変更する形になるのでJavaScriptの利用が必要かと考えているのですが、
JavaScriptで実現可能かどうか、また他に方法があるかどうか、
ご存知の方がいらっしゃれば教えていただきたいです。
尚今回、スクロールバーの色を変更するためのCSSだけは自作ですが、
その他のHTML等は既存のページの状態での変更を考えています。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

その前の質問のようにすべてのページに対応はできませんでしたが、Javascriptを使用すれば
他のブラウザでは使えませんがIE限定なら可能です。（他のブラウザでは使用することができません)
JavaScriptでCSSを変更する際の互換表
このリンク先のScrollbarとあるところを参考に作成いたしました。

HTML
1<html>
2<head>
3<style>
4body {
5scrollbar-base-color: blue;
6}
7-->
8</style>
9<script>
10window.onscroll = function scroll(){
11
12	var sx = document.documentElement.scrollLeft || document.body.scrollLeft;
13	var sy = document.documentElement.scrollTop || document.body.scrollTop;
14	if(sy >= 1000){
15	document.body.style.scrollbarBaseColor ="BLACK"
16	}else if(sy >= 500){
17		document.body.style.scrollbarBaseColor ="RED"
18	}else{
19		document.body.style.scrollbarBaseColor ="white"
20	}
21	
22	console.log(sy);
23	
24	}
25</script>
26</head>
27<body>
28	<div style="height: 3000px;"></div>
29</body>
30</html>

投稿2016/11/22 03:14

date

総合スコア1820

camon

2016/11/22 04:43

回答ありがとうございます。 HTMLのコード例まで作っていただき大変参考になりました。またリンク先の一覧に関しても有益なものでしたので、しっかり学習したいと思います。すべてのページに対応ができないという点が課題ですが、まずはコードをしっかり把握して応用できるようにしていきたいと思います。本当にありがとうございました。

行動規範の内容に同意します