Better Scrollbars

Make scrollbars look better for Chromium-based browsers.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Tendrás que instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Tendrás que instalar una extensión como Tampermonkey antes de poder instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Advertisement:

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

Advertisement:

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