调整 Bilibili 视频合集高度

在 Bilibili 视频播放页面调整视频合集栏目的高度。

目前为 2025-02-27 提交的版本。查看最新版本。

换行

// ==UserScript==
// @name         Bilibili video collection list height adjustment
// @name:zh-CN   调整 Bilibili 视频合集高度
// @namespace    http://tampermonkey.net/
// @version      2025-02-27
// @description  Adjust video collection's height on Bilibili video pages.
// @description:zh-cn  在 Bilibili 视频播放页面调整视频合集栏目的高度。
// @author       dont-be-evil
// @match        https://www.bilibili.com/video/*
// @grant        none
// @license      GPLv3
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    let adjust_height_form = document.createElement('div');
    adjust_height_form.innerHTML =
    `<div style="display: flex; justify-content: space-evenly;">
    <span>Height: </span>
    <input type="number" required>
    <button onclick="adjust_height()"> Apply </button>
    </div>`;
    adjust_height_form = adjust_height_form.firstChild; // equal to .outerHTML when parent node is unknown

    let video_list = document.querySelector("div.video-pod");
    if (!video_list) {
        return;
    }
    video_list.parentNode.insertBefore(adjust_height_form, video_list);
    let content_list = document.querySelector("div.video-pod__list");
    adjust_height_form.children[1].value = content_list.parentNode.offsetHeight;

    function adjust_height() {
        const new_height = parseInt(adjust_height_form.children[1].value);
        video_list.style.height = `${new_height + 100}px`;
        content_list.parentNode.style.maxHeight = `${new_height}px`;
    }

    window.adjust_height = adjust_height; // This makes the function accessible from the HTML button's onclick
})();

欢迎访问Greasy Fork镜像