Make scrollbars look better for Chromium-based browsers.
// ==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);
}