使用CSS修改浏览器窗口的滚动条

Question

我想知道如何使用CSS更改浏览器窗口滚动条的CSS 。 我想更改其颜色和宽度，以便使网页看起来更吸引用户。 我可以使用CSS做到这一点，还是应该使用其他任何语言来做到这一点？

我还想知道浏览器窗口的样式滚动条是否会影响页面加载速度和平滑度，因为我看到带有自定义滚动条的网站在滚动时会滞后。

我想更改以下内容

 1. Width
 2. Color of scroll bar
 3. Color of scroll bar background

这是一个示例页面，足够长以显示滚动条。 您可能会告诉我如何在以下代码上添加效果。

下面的示例结构代码：

HTML：

<html>
<head>
    <title>
        Sample Page
    </title>
</head>
<body>
    <div class="main">

    </div>
</body>
</html>

CSS：

body{
    background:#C0C0C0;
}
.main{
    height:1200px;
    width:1000px;
}

还要尝试包含适用于所有浏览器（例如Google Chrome，Firefox和特别是IE）的代码

Answer 1

您可以使用CSS轻松设计滚动条。

body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background:green;
border-radius: 20px;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
}

有关更多信息，请参见此处。 ： https : //www.webkit.org/blog/363/styling-scrollbars/

Answer 2

得到它了。 上面提供了chrome的CSS，下面给出了IE的CSS

CSS：

body{
   scrollbar-face-color: #EEC800;
   scrollbar-shadow-color: #006cb4;
   scrollbar-highlight-color:#006cb4;
   scrollbar-3dlight-color: #006cb4;
   scrollbar-darkshadow-color: #006cb4;
   scrollbar-track-color: #006cb4;
   scrollbar-arrow-color: #C1C1D1;
}