css怎么设置div滚动条

随着网页及移动端应用的发展，滚动条成为了一种不可或缺的用户体验，而 css3 提供的一系列滚动条样式设置使得我们可以更加灵活地定制滚动条的样式，今天我们就来一起探讨一下如何利用css来设置div滚动条。

一、基础设置

我们在HTML中定义一个带有内容的div，当内容超出div的大小时需要使用滚动条进行查看。下面是一个基本的HTML结构：

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
    <p>这里还是一些内容</p>
  </div>
</div>

接着，我们来设置一下 div 的基本样式，可以添加如下样式：

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

通过给 .wrapper 设置 overflow: auto 属性，使得在滚动条隐藏的情况下，内容大小超过div大小时会出现滚动条，而不会向外展开并覆盖其他元素。

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

下载

二、滚动条基本设置

接下来，我们可以通过以下方式对滚动条的样式进行进一步的定制：

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

代码解析：

1. ::-webkit-scrollbar ：选择所有滚动条部件。该样式可以设置滚动条整体的宽度高度和背景色。
2. ::-webkit-scrollbar-thumb ：选择滑块。该样式可以控制滑块的宽度高度和背景色。
3. ::-webkit-scrollbar-thumb:hover ：选择滑块在hover状态下的样式。
4. ::-webkit-scrollbar-button ：选择滚动条两端的箭头部分。该样式用于控制上下左右箭头的背景色和是否显示。
5. ::-webkit-scrollbar-button:start:decrement 或者 ::-webkit-scrollbar-sub-button ：选择滚动条上箭头(向上滚动)/左箭头(向左滚动)部分，当滚动条是垂直/水平方向时使用。
6. ::-webkit-scrollbar-button:end:increment 或者 ::-webkit-scrollbar-add-button ：选择滚动条下箭头(向下滚动)/右箭头(向右滚动)部分，当滚动条是垂直/水平方向时使用。

三、自定义滚动条

我们可以根据需要，自定义滚动条的样式，下面是一个自定义样式的例子：

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

代码解析：

1. ::-webkit-scrollbar-track ：选择滚动条的 track 部分，是滑块和滚动箭头/滚动区域之间的区域，可以设置 track 的样式，如背景颜色、边框、圆角等，此例子中我们对其进行了圆角设置。
2. ::-webkit-scrollbar-thumb ：选择滑块的样式，此例子中我们对其进行了圆角设置，并设置了滑块的背景颜色以及hover状态下背景颜色。
3. ::-webkit-scrollbar-corner ：设置滚动条的角落的颜色，通常我们把它设为与容器颜色相同。

四、总结

经过以上对滚动条的设置，我们可以根据实际需求选择相应的样式进行设置，这样可以更好地体验到网页及移动端应用的交互体验。同时需要注意的是，以上示例主要适用于 Chrome 和 Safari 等一些 Webkit 内核的浏览器，如果要适配其他浏览器，需要使用不同的样式和属性。