Better Scrollbars

Make scrollbars look better for Chromium-based browsers.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да инсталирате разширение, като например Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==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);
}