CSS滚动条实现步骤及美化小技巧

在原来的 html 的时候，我们可以这样定义整个页面的滚动条

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
   scrollbar-highlight-color:#fff; /*- 左二 -*/
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/
   scrollbar-arrow-color:#666; /*- 箭头 -*/
   scrollbar-shadow-color:#808080; /*- 右二 -*/
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/
   scrollbar-track-color:#;/*- 滑道 -*/
}

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
   scrollbar-highlight-color:#fff; /*- 左二 -*/
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/
   scrollbar-arrow-color:#666; /*- 箭头 -*/
   scrollbar-shadow-color:#808080; /*- 右二 -*/
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/
   scrollbar-track-color:#;/*- 滑道 -*/
}

*{
scrollbar-3dlight-color:#D4D0C8; 
   scrollbar-highlight-color:#fff; 
   scrollbar-face-color:#E4E4E4; 
   scrollbar-arrow-color:#666; 
   scrollbar-shadow-color:#808080; 
   scrollbar-darkshadow-color:#D7DCE0; 
   scrollbar-base-color:#D7DCE0; 
   scrollbar-track-color:#;
}

<style>
html { overflow-x:hidden; //隐藏水平滚动条overflow-y:hidden;//隐藏垂直滚动条}
</style>

::-webkit-scrollbar {
  width: 15px;
} /* 这是针对缺省样式 (必须的) */

::-webkit-scrollbar-track {

  background-color: #b46868;

} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {

  background-color: rgba(0, 0, 0, 0.2); 

} /* 滑块颜色 */

::-webkit-scrollbar-button {

  background-color: #7c2929;

} /* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {

  background-color: black;

} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */

谷歌浏览器的用户是最幸福的。但我们也不能放弃火狐浏览器和IE浏览器用户。对于这些浏览器，有一个非常有效的补救方案，就是使用 javascript 插件。网上有不少人推荐一个由 Kelvin Luck 开发的一个 jQuery 插件：jScrollPane。但也有人评论这个插件是“PITA”，我翻了一下字典，发现“PITA”中文意思是“让人蛋疼”。经过试用，感到它的确是让人蛋疼。不推荐使用它。我发现了另外一个插件 malihu-custom-scrollbar-plugin，感觉相当不错，它的用法是：

<link rel="stylesheet" href="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css">

<!-- latest jQuery direct from google's CDN -->

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

<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>

<script src="js/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>

<script>

if (!$.browser.webkit) {

$.mCustomScrollbar.defaults.scrollButtons.enable=true; //enable scrolling buttons by default

$.mCustomScrollbar.defaults.axis="yx"; //enable 2 axis scrollbars by default

$(".container").mCustomScrollbar({theme:"dark"});

}

</script>

已经有很多网站都使用了这些滚动条的 CSS 美化技巧，特别是谷歌的一些应用和网站上，比如 Gmail 和 Google+。相信很快火狐浏览器和IE浏览器也会提供自己的解决方案。

用CSS调整滚动条配色
IE浏览器可以通过调整CSS的方式，来给滚动条换色。

代码如下：

.uicss-cn

{

height:580px;overflow-y: scroll;

scrollbar-face-color:#EAEAEA;

scrollbar-shadow-color:#EAEAEA;

scrollbar-highlight-color:#EAEAEA;

scrollbar-3dlight-color:#EAEAEA;

scrollbar-darkshadow-color:#697074;

scrollbar-track-color:#F7F7F7;

scrollbar-arrow-color:#666666;

}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/10363.html