Question

我使用简单的代码进行颜色自定义滚动条：

<style type="text/css">  
<!--
BODY
{
    scrollbar-face-color: #000000;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #000000;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FF99FF;
    scrollbar-track-color: #FFCCFF;
}
-->
</style>

它在Chrome中不起作用，但在IE中却没有，并且不确定其他浏览器。我使用chrome作为我的主浏览器，我也在其他网站上看过这个问题，但是想知道是否有任何解决方法？

有一种方法可以创建半透明度的div / box，这些div / box现在可以在所有浏览器中使用特殊脚本，因此想知道滚动条是否有这样的解决方案？

谢谢！

Answer 1

这里有一些适用于所有浏览器的插件：

Answer 2

::-webkit-scrollbar {
    width: 15px;
    background:lightgray;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,255,1); 
    border-radius: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    background:cyan;
}

这适用于Chrome。 Firefox不支持滚动样式。希望它有所帮助！

Answer 3

scrollbar不是CSS标准。在Chrome或Safari（WebKit）中，您可以使用前缀为-webkit- Read more here的扩展程序。

FireFox不支持滚动条样式。

所以你可能只能在IE和WebKit浏览器中支持这种效果，或者像Iwo Kucharski所说的那样使用JavaScript库。

Answer 4

这些属性在Internet Explorer外部无法正常工作。它们是一种奇怪的微软混合物，从未出现过任何标准。

如果你想伪造它，你需要一些Javascript。我认为纯CSS不会让你产生效果。

Answer 5

/*! Firefox */    
html{
    scrollbar-color: #128612 #004E00;
}

/*! Other Browser */
html {
    --scrollbarBG: #128612;
    --thumbBG: #004E00;
  }
  body::-webkit-scrollbar {
    width: 11px;
  }
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  }
  body::-webkit-scrollbar-track {
    background: var(--scrollbarBG);
  }
  body::-webkit-scrollbar-thumb {
    background-color: var(--thumbBG) ;
    border-radius: 6px;
    border: 3px solid var(--scrollbarBG);
  }

Answer 6

如果我们禁用JavaScript，则滚动将无法正常工作，也不会有人在<noscript>中有代码。

如何在所有浏览器中显示自定义滚动条？

6 个答案: