Cover Zhihu Homepage

Cover content starting from the second div element on Zhihu with a color overlay based on theme
目前為 2024-10-07 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// @license MIT
// ==UserScript==
// @name         Cover Zhihu Homepage
// @namespace    http://tampermonkey.net/
// @version      0.6
// @description  Cover content starting from the second div element on Zhihu with a color overlay based on theme
// @author       Snowballl11
// @match        *://www.zhihu.com/
// @match        *://www.zhihu.com/?theme=dark
// @grant        none
// ==/UserScript==

window.addEventListener('load', function() {
    // 选择 div:nth-of-type(2) 元素
    const targetDiv = document.querySelector('div:nth-of-type(2)');

    // 如果元素存在，则在其下方添加一个覆盖层
    if (targetDiv) {
        // 获取目标元素的位置信息
        const targetDivRect = targetDiv.getBoundingClientRect();

        // 创建一个新的 div 元素作为覆盖层
        const overlay = document.createElement('div');

        // 设置覆盖层样式
        overlay.style.position = 'fixed';  // 固定定位，确保覆盖层不随滚动移动
        overlay.style.top = `${targetDivRect.bottom}px`;  // 从目标元素的底部开始
        overlay.style.left = '0';          // 左侧对齐
        overlay.style.width = '100%';      // 占满整个页面宽度
        overlay.style.height = '100%';     // 高度设置为100%，覆盖可视区域及以下
        overlay.style.zIndex = '9999';     // 确保覆盖层在顶层显示
        overlay.style.pointerEvents = 'none';  // 不影响页面下方的交互操作

        // 根据当前 URL 设置背景颜色
        if (window.location.href === 'https://www.zhihu.com/?theme=dark') {
            overlay.style.backgroundColor = 'black';  // 使用黑色覆盖
        } else {
            overlay.style.backgroundColor = 'white';  // 使用白色覆盖
        }

        // 将覆盖层添加到页面中
        document.body.appendChild(overlay);

        // 当页面滚动时，确保覆盖层始终覆盖所有内容
        window.addEventListener('scroll', function() {
            // 动态调整覆盖层的高度，使其能够覆盖到页面底部
            overlay.style.height = `${document.documentElement.scrollHeight}px`;
        });
    }
});
欢迎访问Greasy Fork镜像
