Question

我想知道如何使用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 IS

<强> 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;
}

使用CSS

我想更改以下内容

2 个答案: