私のウェブページで、カスタムスクロールバーを取得しようとしています。正常に動作しています。
これで、ユーザーが黒のテーマまたは白のテーマのいずれかを選択できるテーマボタンができました。このために、2つのcssファイルを作成しました。1つはcarbon.css、もう1つはquartz.cssです。
ユーザーがテーマの1つをクリックすると、以下の関数でcssファイルが更新されます。
スクロールバーを除くすべての変更を正しく表示できます。マウスをスクロールバーに合わせるまで、そのcssの変更は発生しません。
より明確にするために、私が黒のテーマにいると仮定します。黒いスクロールバーが表示されています。白のテーマをクリックすると、背景がすべて表示され、テキストが白のテーマに適切に変更されます。ただし、スクロールバーはまだ黒のテーマのままです。マウスをスクロールバーに移動すると、スクロールバーが白いテーマに更新されます。
どうすればこの問題を解決できますか？
ありがとう！
ちょっとAnubav：これがあなたの変更を含めた後に私が働いているコードです：
trail.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<link href="./carbon.css" rel="stylesheet" type="text/css" id="extCSSFile"/>
<script type="text/javascript">
$(document).ready(function() {
function changeAndPaint(that){
var filename = $(that).attr('data-href');
$('#extCSSFile').attr('href',filename);
var newfile = $('#extCSSFile');
$('#extCSSFile').remove();
$(that).css('display','none').height(); //<--this is the trick to repaint
$(that).css('display','inherit');
var elem = $('<link href="" rel="stylesheet" type="text/css" id="extCSSFile"/>');
$(elem).attr('href',filename);
$('head').append(elem);
}
$('#carbonTheme,#quartzTheme').on('click', function(){
changeAndPaint($(this));
});
});
</script>
</head>
<body>
<ul id="nav">
<li id="carbonTheme" data-href="./carbon.css">carbon Theme </li>
<li id="quartzTheme" data-href="./quartz.css">Quartz Theme </li>
</ul>
<div>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p><p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p><p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p>There are no results</p>
<p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p><p></p><p></p><p></p><p></p>
<p></p>
</div>
</body>
</html>
carbon.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:8.5pt;
width:inherit;
min-width:100px;
max-width:250px;
margin:10px;
background-color:#191919;
color:white;
}
ul{height:1000px;}
#carbonTheme, #quartzTheme{
text-decoration:underline;
color:blue;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color:#aaa;
}
::-webkit-scrollbar-thumb {
background-color:black;
}
quartz.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:8.5pt;
width:inherit;
min-width:100px;
max-width:250px;
margin:10px;
}
ul{height:1000px;}
#carbonTheme, #quartzTheme{
text-decoration:underline;
color:blue;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background-color:#333;
}
::-webkit-scrollbar-thumb {
background-color:white;
}