滚动条样式修改-Deepseek 助力写油猴脚本，超简单！

喂饭命令：写一个“油猴脚本”浏览器滚动条美化

写完后有说明、使用方法、注意事项

复制脚本到油猴管理面板新建用户脚本

保存后的脚本，在已安装的脚本中查看。

浏览器滚动条美化脚本未打开效果图

浏览器滚动条美化脚本打开效果图

脚本代码

// ==UserScript==
// @name         动态美化滚动条
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  通过右键菜单动态调整滚动条大小（大、中、小）
// @author       科技鸢
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_addStyle
// ==/UserScript==
(function () {
    'use strict';
    // 定义滚动条样式
    const scrollbarStyles = {
        large: `
            ::-webkit-scrollbar {
                width: 12px;
                height: 12px;
            }
            ::-webkit-scrollbar-thumb {
                background: #888;
                border-radius: 10px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
        `,
        medium: `
            ::-webkit-scrollbar {
                width: 9px;
                height: 9px;
            }
            ::-webkit-scrollbar-thumb {
                background: #888;
                border-radius: 8px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
        `,
        small: `
            ::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            ::-webkit-scrollbar-thumb {
                background: #888;
                border-radius: 6px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
        `,
    };
    // 默认样式
    let currentStyle = scrollbarStyles.small;
    // 添加样式到页面
    function applyScrollbarStyle(style) {
        const styleId = 'custom-scrollbar-style';
        let styleElement = document.getElementById(styleId);
        if (!styleElement) {
            styleElement = document.createElement('style');
            styleElement.id = styleId;
            document.head.appendChild(styleElement);
        }
        styleElement.textContent = style;
    }
    // 初始化应用默认样式
    applyScrollbarStyle(currentStyle);
    // 注册右键菜单选项
    GM_registerMenuCommand('滚动条大小: 大', () => {
        currentStyle = scrollbarStyles.large;
        applyScrollbarStyle(currentStyle);
    });
    GM_registerMenuCommand('滚动条大小: 中', () => {
        currentStyle = scrollbarStyles.medium;
        applyScrollbarStyle(currentStyle);
    });
    GM_registerMenuCommand('滚动条大小: 小', () => {
        currentStyle = scrollbarStyles.small;
        applyScrollbarStyle(currentStyle);
    });
})();

只要你有想法，可以做出天马行空的创意脚本滚动条样式修改，今天的分享到这里结束了，感谢大家能够看到这里滚动条样式修改，如本文章对你有用，请点赞、评价、转发和发表您的观点！

限时特惠:本站持续每日更新海量各大内部创业课程，一年会员仅需要98元，全站资源免费下载
点击查看详情

站长微信:Jiucxh