全局细滚动条

将所有网页的滚动条样式改为细滚动条。
目前為 2024-03-02 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         全局细滚动条
// @namespace    https://greasyfork.org/zh-CN/scripts/460793
// @version      1.0.3
// @description  将所有网页的滚动条样式改为细滚动条。
// @author       nosora
// @match        *://*/*
// @license      MIT
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    var css = '::-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; }';

    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName('head')[0].appendChild(style);

    if (!window.location.host.includes('youtube.com')) {
        return;
    }

    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'
    }

    if (setting.enable) {
        document.documentElement.classList.toggle('Meet_you_elegant_scrollbar', true);
        GM_addStyle(`
            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;
            }
        `);
    }
})();