YouTube Independent Sidebar Scroll

yt_sidebar_scroll.user.js

// ==UserScript==
// @name         YouTube Independent Sidebar Scroll
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Makes the YouTube sidebar scroll independently of the main video/comments
// @author       Gall
// @match        *://www.youtube.com/*
// @exclude      *://www.youtube.com/feed/history
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    var style = document.createElement('style');

    style.innerHTML = `
        /* Target the sidebar (#secondary).
           Use !important to override YouTube's flex/grid defaults.
        */
        #secondary {
            /* 1. Stick to the top of the viewport */
            position: sticky !important;

            /* 2. Position it below the YouTube header (approx 56px) */
            top: 56px !important;

            /* 3. Limit height to the viewport height minus the header */
            /* We use the native variable --ytd-masthead-height (usually 56px) for accuracy */
            max-height: calc(100vh - var(--ytd-masthead-height, 56px)) !important;

            /* 4. Allow scrolling inside this container */
            overflow-y: auto !important;

            /* 5. Prevent the sidebar from overlapping the right edge scrollbar */
            box-sizing: border-box !important;
        }

        /* Optional: Style the scrollbar to make it cleaner (thinner, grey) */
        #secondary::-webkit-scrollbar {
            width: 8px;
        }
        #secondary::-webkit-scrollbar-track {
            background: transparent;
        }
        #secondary::-webkit-scrollbar-thumb {
            background-color: rgba(100, 100, 100, 0.5);
            border-radius: 4px;
        }
        #secondary::-webkit-scrollbar-thumb:hover {
            background-color: rgba(100, 100, 100, 0.8);
        }
    `;

    if (document.head) {
        document.head.appendChild(style);
    } else {
        document.documentElement.appendChild(style);
    }

})();