css滚动条样式，修改div滚动条样式

阅读量： 44 发布日期： 2022-11-03 13:26:38

CSS滚动条样式可以让你的网页看起来更加优美，下面就让我们来看一看如何实现吧。

1、css滚动条样式

css滚动条样式，修改div滚动条样式

CSS 滚动条样式可以让您的网页或应用程序看起来更加美观。它们还可以帮助您改善用户体验，使您的网站或应用程序更易于使用。本文将介绍如何使用 CSS 来自定义滚动条样式，并提供一些有用的技巧和示例。

2、css滚动条样式的兼容性

对于不同浏览器，css滚动条样式的兼容性问题一直是个大问题，目前尚未得到完美的解决方案。针对不同浏览器，可以使用不同的css代码来实现相同的效果，但是这样会导致代码的冗余，不利于维护。另外，也可以使用一些javascript代码来检测浏览器的类型，然后加载相应的css代码，但是这样会影响页面的加载速度。

3、设置div滚动条样式

为了能够设置div的滚动条样式，我们需要给div设置一个id。

overflow:auto;

.div::-webkit-scrollbar {

width: 4px; /*高宽分别对应横竖滚动条的尺寸*/

height:0px;

}

.div::-webkit-scrollbar-thumb {

border-radius: 10px;

-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

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

}