scrollbar_beautifier.md

🪄 美化浏览器侧边滚动条

效果对比

点击安装 👉 美化浏览器侧边滚动条

scrollbar_beautifier.pub.user.js

// ==UserScript==
// @name            美化浏览器侧边滚动条 Scrollbar Beautifier
// @description     美化浏览器侧边滚动条


// @author          forestlet
// @copyright       2022-
// @homepageURL     https://gist.github.com/forestlet/41a433a36331335c882282739c03da4b
// @version         0.2
// @lastmodified    2022-03-07

// @namespace       http://tampermonkey.net/
// @match           http://*/*
// @include         https://*/*
// @include         file:///*
// @icon            data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🪄</text></svg>
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Your code here...
    window.onload = function () {
        let styleElement = document.createElement('style');
        styleElement.innerText =
            `
        ::-webkit-scrollbar {
            width: 4px !important;
            height: 4px !important;
          }

        ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: transparent;
        }

        ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #dadada;
        }
    `
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
})();