在我的网页中，我试图获得自定义滚动条。它工作正常。
现在我有一个主题按钮，允许用户选择黑色主题或白色主题。为此，我写了两个 css 文件，一个 carbon.css 和另一个 quartz.css
当用户点击其中一个主题时，我将使用以下函数更新 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;
}
最佳答案
要强制浏览器重新绘制完整的 DOM，只需执行 $("#body").offset().Top;(body 是赋予 body 标签以加速选择器的 ID)
完成任务的一个简单方法是向链接元素添加属性 disabled="disabled"
在 HEAD 部分中将 LINK 包含为:
<link href="./carbon.css" rel="stylesheet" type="text/css" id="carbonCSS" />
<link href="./quartz.css" rel="stylesheet" type="text/css" id="quartzCSS" disabled="disabled" />
在链接下方包含脚本:
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').on('click', function(){
objLink = document.getElementById($(this).attr("data-href"))
$("#carbonCSS , #quartzCSS").attr("disabled","disabled");
$("#body").offset().Top; // Force Repaint
objLink.removeAttribute("disabled");
});
});
</script>
完整的 html 页面可能如下所示:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="./carbon.css" rel="stylesheet" type="text/css" id="carbonCSS" />
<link href="./quartz.css" rel="stylesheet" type="text/css" id="quartzCSS" disabled="disabled" />
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').on('click', function(){
objLink = document.getElementById($(this).attr("data-href"))
$("#carbonCSS , #quartzCSS").attr("disabled","disabled");
$("#body").offset().Top;
objLink.removeAttribute("disabled");
});
});
</script>
</head>
<body id="body">
<ul id="nav">
<li id="carbonTheme" data-href="carbonCSS">carbon Theme </li>
<li id="quartzTheme" data-href="quartzCSS">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>
关于html - webkit 滚动条不充电，直到我在更改主题时将鼠标悬停在它上面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12323552/