Greasy Fork

全局细滚动条

将所有网页的滚动条样式改为细滚动条。

当前为 2024-03-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         全局细滚动条
// @namespace    https://greasyfork.org/zh-CN/scripts/460793
// @version      1.0.5
// @description  将所有网页的滚动条样式改为细滚动条。
// @author       nosora
// @match        *://*/*
// @exclude      *.nosora.me/*
// @license      MIT
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    var setting = {
        'enable': !navigator.platform.toLowerCase().includes('mac'),
        'width': '3px',
        'color': '#aaa',
        'color_hover': '#999',
        'background_color': 'rgb(244, 244, 244)',
        'background_color_hover': 'rgb(244, 244, 244)',
        'radius': '2px',
        'transition': '10s'
    }

    // Common CSS for all websites except YouTube
    var commonCSS = `
        ::-webkit-scrollbar { width: 6px; height: 6px; border-radius: 1.5px; }
        ::-webkit-scrollbar-track { background-color: #f5f5f500; }
        ::-webkit-scrollbar-thumb { background-color: #bbbbbb90; border-radius: 1.5px; }
    `;

    // CSS for YouTube
    var youtubeCSS = `
        html.Meet_you_elegant_scrollbar,
        html.Meet_you_elegant_scrollbar * {
            scrollbar-color: ${setting.color} ${setting.background_color};
            scrollbar-width: thin;
        }
        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            height: ${setting.width} !important;
            width: ${setting.width} !important;
            background-color: ${setting.color} !important;
            border-radius: ${setting.radius} !important;
            transition: ${setting.transition} !important;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: ${setting.color_hover} !important;
        }

        /* 滚动条背景 */
        ::-webkit-scrollbar,
        ::-webkit-scrollbar-track {
            height: ${setting.width};
            width: ${setting.width};
            background-color: ${setting.background_color} !important;
            transition: ${setting.transition} !important;
        }
        ::-webkit-scrollbar:hover,
        ::-webkit-scrollbar-track:hover {
            background-color: ${setting.background_color_hover} !important;
        }

        /* 横纵滑条交汇处 */
        ::-webkit-resizer,
        ::-webkit-scrollbar-corner {
            background-color: ${setting.background_color} !important;
        }
    `;

    // Apply common CSS to all websites except YouTube and nosora.me
    if (!window.location.hostname.includes('youtube.com') && !window.location.hostname.includes('nosora.me')) {
        var style = document.createElement('style');
        style.type = 'text/css';
        style.appendChild(document.createTextNode(commonCSS));
        document.getElementsByTagName('head')[0].appendChild(style);
    }

    // Apply YouTube specific CSS
    if (window.location.hostname.includes('youtube.com') && setting.enable) {
        document.documentElement.classList.toggle('Meet_you_elegant_scrollbar', true);
        GM_addStyle(youtubeCSS);
    }
})();