css 设置滚动条的样式以及各个浏览器的兼容性

 /*设置滚动条样式为细小*/
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;

这种设置，在一些旧版本的浏览器不兼容，可以再增加以下样式

/* 定义全局滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

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

这样设置，整个页面所有的滚动条都会生效。

如果只要某个元素的，可以如下设置：

/* 仅针对class为custom-scrollbar的元素定义滚动条样式 */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

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