Better Scrollbars

Make scrollbars look better for Chromium-based browsers.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Better Scrollbars
// @name:zh-CN   更好的滚动条
// @name:es      Better Scrollbars (Mejores barras de desplazamiento)
// @namespace    https://alikia2x.com
// @version      1.2
// @description  Make scrollbars look better for Chromium-based browsers.
// @description:zh-CN 将 Chromium 内核浏览器中笨重的默认滚动条替换为精简、极简的现代化滚动条。
// @description:es    Reemplaza las pesadas barras de desplazamiento predeterminadas en navegadores Chromium por una alternativa elegante y minimalista.
// @author       alikia2x
// @match        *://*/*
// @grant        GM_addStyle
// @run-at       document-start
// @license      MIT
// ==/UserScript==

const css = `
    /* 1. Expand the width/height to make room for the "margin" */
    ::-webkit-scrollbar {
        width: 14px;  /* Total width = thumb + padding */
        height: 14px;
    }

    /* 2. Remove tracks entirely */
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-track-piece {
        background: transparent;
        border: none;
    }

    /* 3. The Minimalist Floating Thumb with Fake Margin */
    ::-webkit-scrollbar-thumb {
        background-color: rgba(120, 120, 120, 0);
        border-radius: 10px;

        /* THE TRICK: Transparent border acts as a margin, background-clip keeps color inside */
        border: 4px solid transparent;
        background-clip: padding-box;

        /* Note: Transitions on webkit-scrollbar are generally ignored by browsers,
            but we keep background-clip compatible */
    }

    /* 4. Respecting Page Behavior: Reveal ONLY if the container is being hovered */
    html:hover::-webkit-scrollbar-thumb,
    body:hover::-webkit-scrollbar-thumb,
    textarea:hover::-webkit-scrollbar-thumb,
    *[style*="overflow"]:hover::-webkit-scrollbar-thumb,
    *[class*="scroll"]:hover::-webkit-scrollbar-thumb {
        background-color: rgba(120, 120, 120, 0.4);
    }

    /* Darken when mouse is directly over the thumb or actively dragging */
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(120, 120, 120, 0.7);
    }
    ::-webkit-scrollbar-thumb:active {
        background-color: rgba(90, 90, 90, 0.9);
    }

    /* Hide annoying scrollbar buttons (arrows) */
    ::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
`;

if (typeof GM_addStyle !== 'undefined') {
    GM_addStyle(css);
} else {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    (document.head || document.documentElement).appendChild(style);
}