【CSS】ニコニコのスクロールバーをYouTubeに導入

0. はじめに

YouTubeで現在の動画見ながら次の動画探したいなぁ...

ニコニコ動画みたいなスクロールバーがあればいいのになぁ...

自分で作るかぁ...

ということで、YouTubeの関連動画にニコニコ動画のようなスクロールバーを導入してみました。

1. 導入方法

1.1. Stylusのインストール

ウェブページに独自のCSSを適用するための拡張機能「Stylus」をインストールします。

1.2. CSSの適用

YouTubeに移動し、StylusのアイコンをクリックしてCSSの編集画面を開きます。

その後、以下のCSSを貼り付け、左側にある「保存」ボタンを押します。

@-moz-document domain("youtube.com") {
    #items.style-scope.ytd-watch-next-secondary-results-renderer {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 420px;  /* 関連動画の幅 */
        height: 65em;  /* スクロールバーの高さ */
        margin-bottom: 80px;
        overscroll-behavior: contain;
    }

    #content.style-scope.yt-related-chip-cloud-renderer {
        display: none;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar {
        width: 8px;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar-track {
        background-color: #dddddd;
        border-radius: 8px;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar-thumb {
        background-color: #828282;
        border-radius: 8px;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar-thumb:hover {
        background-color: #909090;
    }
}

1.3. 調整

height: 65em;の値を調整することで、スクロールバーの高さを調整できます。

スクロールバーが長すぎると、以下のようにスクロールしてもスクロール先の動画が読み込まれなくなってしまう(スクロールが途中で止まってしまう)場合があります。

かと言って短すぎても使いづらいので、適度な長さに調整してください。

他にも、width: 420px;の値を調整することで関連動画の幅を調整できたり、background-color: #dddddd;の値を調整することでスクロールバーの色を調整できたりします。色々試してみてください。

24/08/31 追記: 現在、スクロールバーの色を変更することはできません。