 这是个比Chrome插件更好更简便的实现方法。
这是个比Chrome插件更好更简便的实现方法。
要让所有页面的滚动条变得特别粗,并且颜色为彩色,可以进一步修改CSS。下面是一个示例用户脚本的实现,包含更粗的滚动条和彩色的滑块:
用户脚本
- 安装 Tampermonkey 或其他用户脚本管理器。
- 创建一个新的用户脚本。
- 将下面的代码粘贴到用户脚本编辑器中:
“`javascript
// ==UserScript==
// @name Custom Colorful Scrollbar
// @namespace http://tampermonkey.net/
// @version 0.2
// @description Make all scrollbars thicker and colorful
// @author You
// @match :///*
// @grant none
// @run-at document-start
// ==/UserScript==
(function() {
‘use strict’;
const css = `
    /* For WebKit browsers */
    ::-webkit-scrollbar {
        width: 20px; /* Width of the vertical scrollbar */
        height: 20px; /* Height of the horizontal scrollbar */
    }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff); /* Rainbow gradient */
        border-radius: 10px; /* Roundness of the scrollbar thumb */
    }
    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(45deg, #8b00ff, #4b0082, #0000ff, #00ff00, #ffff00, #ff7f00, #ff0000); /* Reversed rainbow gradient */
    }
    ::-webkit-scrollbar-track {
        background: #f0f0f0; /* Light gray background for the scrollbar track */
    }
    /* For Firefox */
    html {
        scrollbar-width: thick; /* "auto" or "thin" */
        scrollbar-color: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff) #f0f0f0; /* thumb color and track color */
    }
`;
const style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);
})();
“`
解释
- 
滚动条宽度和高度: 
- 
width和height设置为20px,使滚动条更粗。
- 
彩色滚动条: 
- 
background: linear-gradient(45deg, ...)为滚动条滑块设置彩虹渐变色。
- 
border-radius设置为10px,使滑块更圆滑。
- 
::-webkit-scrollbar-thumb:hover定义滑块在悬停时的颜色变化(反转的彩虹渐变色)。
- 
滚动条轨道: 
- 
background: #f0f0f0为滚动条轨道设置浅灰色背景。
- 
Firefox支持: 
- 
scrollbar-width: thick设置滚动条的宽度。
- 
scrollbar-color使用渐变色作为滑块颜色,浅灰色作为轨道颜色。
将这个脚本保存并启用后,所有页面的滚动条将变得特别粗,并且滑块将显示彩虹渐变色。你可以根据需要调整CSS属性来定制滚动条的外观。
