如何使用 CSS 自定义浏览器的滚动条

滚动条在网页设计中经常被忽视，但却提供了增强整体用户体验的独特机会。借助 CSS，您可以将这种看似平凡的元素转变为网站设计中时尚而和谐的部分。在本文中，我们将探索各种 CSS 滚动条修改技术，这些技术不仅会增添一丝优雅，而且有助于打造更具凝聚力和视觉上令人愉悦的用户界面。

1.隐藏默认滚动条：
通过隐藏默认滚动条以支持更加自定义的方法，从头开始。

/* Hide the default scrollbar */
body {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* For Webkit browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background-color: transparent;
}

2.纤薄时尚的滚动条：
缩小滚动条的大小并添加微妙的颜色以减少干扰。

/* Slim and stylish scrollbar */
body {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

/* For Webkit browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background-color: #888;
}

3.渐变滚动条：
将渐变效果注入滚动条，以获得现代和动态的外观。

/* Gradient scrollbar */
body {
    scrollbar-width: thin;
    scrollbar-color: linear-gradient(to right, #3498db, #2ecc71) transparent;
}

/* For Webkit browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background-color: linear-gradient(to right, #3498db, #2ecc71);
}

4.自定义滚动条轨道：
修改滚动条的轨道以补充您网站的配色方案。

/* Customized scrollbar track */
body {
    scrollbar-width: thin;
    scrollbar-color: #ecf0f1 #f39c12;
}

/* For Webkit browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background-color: #ecf0f1;
}

body::-webkit-scrollbar-thumb {
    background-color: #f39c12;
}

5.圆形滚动条拇指：
软化滚动条拇指的边缘以获得更光滑的外观。

/* Rounded scrollbar thumb */
body {
    scrollbar-width: thin;
    scrollbar-color: #2c3e50 #ecf0f1;
}

/* For Webkit browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background-color: #2c3e50;
    border-radius: 10px;
}

6.悬停效果：
向滚动条添加交互式悬停效果，以获得令人愉悦的用户体验。

/* Hover effects on scrollbar */
body {
    scrollbar-width: thin;
    scrollbar-color: #3498db transparent;
}

/* For Webkit browsers (Chrome, Safari) */
body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-thumb {
    background-color: #3498db;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #2980b9;
}

结论：

通过关注细节来提升您的网页设计，滚动条也不例外。通过这些 CSS 修改，您可以将滚动条无缝集成到您的整体设计中，从而创建更具凝聚力和美观的用户界面。尝试这些技术，混合搭配风格，并观察网站的滚动条成为设计语言不可或缺的一部分。请记住，小细节往往会产生最大的影响。快乐造型！🎨✨

适用于所有浏览器的
自定义滚动条 css 适用于 div 的
自定义滚动条 css 适用于所有浏览器的自定义滚动条
css codepen css 滚动条样式示例
webkit-scrollbar
滚动条宽度 css
自定义滚动条 css codepen
自定义水平滚动条 css