3

在我的网页中，我试图获得一个自定义滚动条。它工作正常。

现在我有一个主题按钮，允许用户选择黑色主题或白色主题。为此，我编写了两个 css 文件，一个 carbon.css 和另一个quartz.css

当用户单击其中一个主题时，我正在使用以下函数更新 css 文件。

我能够正确看到除滚动条之外的所有更改。直到我将鼠标悬停在滚动条上，css 更改才发生。

更清楚地说，假设我是黑色主题。我看到黑色滚动条。现在，当我单击白色主题时，我看到所有背景，文本正确更改为白色主题。但滚动条仍保持黑色主题。一旦我将鼠标移到滚动条上，它就会将滚动条更新为白色主题。

我怎么解决这个问题？

谢谢！

嘿 Anubav：这是包含您的更改后我正在工作的代码：

线索.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>

碳.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;
}

石英.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;
 }
4

6 回答 6

3

要强制浏览器重新绘制完整的 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>
于 2012-09-17T11:06:51.633 回答
2

您需要删除并附加链接元素。

HTML 文件

<html>
<head>
<title></title>
<link href="css.css" rel="stylesheet" type="text/css" id="extCSSFile"/>
<script src="jq.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    $('#bt,#wt').on('click', function(){

        $('#extCSSFile').attr('href',$(this).attr('data-href'));
        var newfile = file = $('#extCSSFile');
        $('#extCSSFile').remove();

        $('head').append($(newfile));
    });
    });
</script>
</head>
<body>
<ul id="nav">
<li id="bt" data-href="css.css">blackTheme</li>
<li id="wt" data-href="css2.css">whiteTheme</li>
</ul>
</body>
</html>

css.css 文件

ul{height:1000px;}

#bt, #wt{ 
    text-decoration:underline;
    color:blue;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
  background-color:#aaa;
}

::-webkit-scrollbar-thumb {

    background-color:black;
}

css2.css

body{
    background-color:black;
    color:white;
}

ul{height:1000px;}

#bt, #wt{ 
    text-decoration:underline;
    color:blue;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
  background-color:#333;
}

::-webkit-scrollbar-thumb {

    background-color:white;
}
于 2012-09-10T20:52:09.917 回答
2

这个解决方案有一些奇怪的地方。正如@Quentin 指出的那样，您不应将该rel属性仅用于可变存储区域。您可能希望在属性中使用 css 路径href（因为无论如何您都返回 false），或者为每个链接设置 a classorid为“黑色”或“白色”。

最重要的是，当您说只是$('link')自动更改页面上的第href一个link元素时。我会为您的主题元素使用idattr link，因此您始终知道您正在更改该主题元素（无论您是否在此之前添加其他链接）。

每次单击更改主题时，您的方法还将添加一个 http 请求。

我认为这将是您最好的解决方案：将所有样式放在同一个 css 表中，并class为每个特定于主题的样式加上前缀，然后toggleClass()(jQuery) 在您的html元素上往返blackTheme/ whiteTheme。这将简化您的许多问题，并且可能会自动清除滚动条颜色问题。

这是一个小提琴，希望能说明这个想法。（为简单起见，我只使用 2 向切换来完成这项工作。）

于 2012-09-10T14:34:45.377 回答
2

我相信我们在这里有一个赢家。

这只是 HTML 文件代码；css 文件可以是你想要的。

我希望有一个纯 CSS 的方法。我也没有为此目的找到故意的重绘命令。我确实发现一个使用了 chrome 扩展，很奇怪。但无论如何，重绘很容易，你所要做的就是稍微摇动绘制的 DOM 就可以了。

哦，我正在使用最新的金丝雀版本和 jQuery；所以在你的代码中考虑它们。让我知道是否有问题。

<link href="" rel="stylesheet" type="text/css" id="extCSSFile"/>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
$(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(e);
}

    $('#bt,#wt').on('click', function(){
            changeAndPaint($(this));
        }); 
    });
于 2012-09-11T17:09:16.630 回答
2

其他解决方案都不适合我。我终于body在 webkit 中得到了滚动条来重绘使用这个：

$('body').hide();
$('body').get(0).offsetHeight;
$('body').show();

...如此处建议：http: //www.eccesignum.org/blog/solving-display-refreshredrawrepaint-issues-in-webkit-browsers

编辑：上面的 javascript 会将滚动位置重置到页面顶部。

要保持在相同的滚动位置：

var scrollX = window.pageXOffset;
var scrollY = window.pageYOffset;
$('body').hide();
$('body').get(0).offsetHeight;
$('body').show();
window.scrollTo(scrollX, scrollY);
于 2014-10-02T19:44:23.007 回答
1

我已经详细说明了 Scrimothy 的解决方案（实际上在我阅读他的答案之前写了我的答案，哎呀），我碰巧认为它非常巧妙和高效。我不确定为什么他的出色示例对您不起作用，但也许使用此处包含的 webkit 滚动条样式，您将能够弥合差距。

与其依赖重绘和多个 css 文件，不如使用 jQuery 在 body 标签上切换特定于主题的类，并使用特定于body.quartz ...和的选择器将所有 css 放在一个文件中body.carbon...。

在这个小提琴中检查一下：http: //jsfiddle.net/crowjonah/Ajkjy/

该脚本被提炼为：

$('body').addClass('carbon'); // apply the default theme
$('#carbonTheme').on('click', function(){
    $('body').removeClass('quartz');
    $('body').addClass('carbon');
});
$('#quartzTheme').on('click', function(){
    $('body').removeClass('carbon');
    $('body').addClass('quartz');
});

你的 CSS 开始看起来像这样：

body.carbon {
    font-family:Arial,Helvetica,sans-serif;
    font-size:8.5pt;
    width:inherit;
    min-width:100px;
    max-width:250px;
    margin:10px;
    background-color:#191919;
    color:#fff;
}

body.carbon #carbonTheme,body.carbon #quartzTheme {
    text-decoration:underline;
    color:blue;
    cursor:pointer;
}

::-webkit-scrollbar {
    width:12px;
}

body.carbon .constraint::-webkit-scrollbar-track {
    background-color:#aaa;
}

body.carbon .constraint::-webkit-scrollbar-thumb {
    background-color:#000;
}

body.quartz {
    font-family:Arial,Helvetica,sans-serif;
    font-size:8.5pt;
    width:inherit;
    min-width:100px;
    max-width:250px;
    margin:10px;
}

body.quartz #carbonTheme,body.quartz #quartzTheme {
    text-decoration:underline;
    color:blue;
    cursor:pointer;
}

body.quartz .constraint::-webkit-scrollbar-track {
    background-color:#333;
}

body.quartz .constraint::-webkit-scrollbar-thumb {
    background-color:#fff;
}

.constraint {
    height:100px;
    overflow-y:scroll;
}​

现在我承认有很多潜在的正当理由这可能不适合您的目的（特别是如果您有大量主题，并且它们每个都有大量独特的样式，）但我认为如果您小心并且可以定义一致的布局，例如独立于主题的宽度和边距，这将为您节省 HTTP 请求（正如 Scrimothy 所说），允许更快的加载时间，并防止您陷入 rel 的障碍，删除和附加链接标签等.

于 2012-09-13T21:11:18.880 回答