微信读书沉浸式阅读

微信读书上拉(滚轮向前)显示头部和侧栏,下拉(滚轮向后)隐藏头部,侧栏通过菜单开关控制下拉时隐藏,支持主题切换,顶部菜单添加毛玻璃效果

当前为 2025-03-18 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         微信读书沉浸式阅读
// @version      1.0.14
// @description  微信读书上拉(滚轮向前)显示头部和侧栏,下拉(滚轮向后)隐藏头部,侧栏通过菜单开关控制下拉时隐藏,支持主题切换,顶部菜单添加毛玻璃效果
// @icon         https://i.miji.bid/2025/03/15/560664f99070e139e28703cf92975c73.jpeg
// @author       Grok
// @match        https://weread.qq.com/web/reader/*
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @license      MIT
// @namespace http://github.com/lossj
// ==/UserScript==

(function() {
    'use strict';

    // 定义主题对象
    const themes = {
        '极光灰': { background: '#E0E0E0', fontColor: '#222222' },
        '浅咖色': { background: '#FAEBD7', fontColor: '#222222' },
        '米黄色': { background: '#F5F5DC', fontColor: '#332222' },
        '豆沙绿': { background: '#E6F5E6', fontColor: '#223322' },
        '海天蓝': { background: '#EBF5FF', fontColor: '#222266' },
        '夜间深灰色': { background: '#282828', fontColor: '#C8C8C8' }
    };

    // 获取或设置当前主题
    const currentTheme = GM_getValue('currentTheme', '豆沙绿'); // 默认主题为豆沙绿

    // 获取或设置下拉时是否隐藏侧边栏
    const hideSidebarOnScrollDown = GM_getValue('hideSidebarOnScrollDown', false); // 默认下拉时显示侧边栏

    // 自定义样式
    const customStyle = `
        /* 阅读区域的样式 */
        .readerContent, .app_content, .readerChapterContent {
            font-family: "霞鹜文楷", "PingFang SC", "宋体" !important;
            font-size: 18px !important; /* 字号 */
            color: ${themes[currentTheme].fontColor} !important; /* 主题颜色*/
            background-color: ${themes[currentTheme].background} !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            padding: 20px !important;
        }

        /* 正文内容的样式 */
        .readerChapterContent p,
        .readerChapterContent div,
        .readerChapterContent span {
            font-family: inherit !important;
            font-size: inherit !important;
            color: inherit !important;  /* 继承阅读内容字体颜色 */
        }

        /* 整体页面背景 */
        body, html {
            background-color: ${themes[currentTheme].background} !important;
        }

        /* 顶部导航区域加宽并添加隐藏动画及毛玻璃效果 */
        .readerTopBar, .navBar {
            max-width: 1100px !important;
            width: 100% !important;
            margin: 0 auto !important;
            left: 0 !important;
            right: 0 !important;
            position: fixed !important; /* 固定定位 */
            top: 0 !important;
            transition: transform 0.3s ease !important; /* 使用 transform 实现滑动效果 */
            z-index: 1000 !important; /* 确保在顶层 */
            backdrop-filter: blur(10px) !important; /* 毛玻璃模糊效果 */
            -webkit-backdrop-filter: blur(10px) !important; /* 兼容 Safari */
            background: rgba(255, 255, 255, 0.5) !important; /* 半透明白色背景 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; /* 添加轻微阴影 */
        }

        /* 顶部隐藏状态 */
        .readerTopBar.hidden {
            transform: translateY(-100%) !important; /* 向上隐藏 */
        }

        /* 右侧菜单调整 */
        .readerControls, .readerCatalog {
            position: fixed !important;
            left: 1000px !important; /* 恢复原始定位 */
            bottom: 200px !important;
            transition: opacity 0.3s ease !important; /* 恢复 opacity 过渡 */
            opacity: 1 !important; /* 初次确保显示 */
        }

        /* 画线菜单字体颜色和字号 */
        .reader_toolbar_container .toolbarItem {
            color: #ffffff !important; /* 强制按钮文字为白色 */
            font-size: 12px !important; /* 字号12px */
        }

        /* 确保字体全局生效 */
        * {
            font-family: "霞鹜文楷", "PingFang SC", "宋体" !important;
        }
    `;

    // 应用自定义样式
    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = customStyle;
    document.head.appendChild(styleSheet);

    // 沉浸式阅读功能:上拉(滚轮向前)显示顶部和侧边栏,下拉(滚轮向后)隐藏顶部,侧边栏根据开关决定
    let windowTop = 0;
    $(window).scroll(function() {
        let scrollS = $(window).scrollTop();
        let topBar = document.querySelector('.readerTopBar');
        let readerControl = document.querySelector('.readerControls');

        if (scrollS > windowTop && scrollS > 50) { // 下拉(滚轮向后,scrollS变大)
            // 下拉时顶部隐藏,侧边栏根据开关决定
            if (topBar) topBar.classList.add('hidden'); // 隐藏顶部
            if (readerControl) {
                readerControl.style.setProperty('opacity', hideSidebarOnScrollDown ? '0' : '1', 'important'); // 根据开关决定
            }
        } else { // 上拉(滚轮向前,scrollS变小)
            // 上拉时顶部和侧边栏都显示
            if (topBar) topBar.classList.remove('hidden'); // 显示顶部
            if (readerControl) {
                readerControl.style.setProperty('opacity', '1', 'important'); // 强制显示侧边栏
            }
        }
        windowTop = scrollS;
    });

    // 注册主题切换菜单
    Object.keys(themes).forEach(theme => {
        GM_registerMenuCommand(`切换到 ${theme}`, () => {
            GM_setValue('currentTheme', theme);
            location.reload(); // 刷新页面应用新主题
        });
    });

    // 注册侧边栏下拉隐藏切换菜单
    GM_registerMenuCommand(`下拉时侧边栏: ${hideSidebarOnScrollDown ? '🙈 隐藏' : '👁️ 显示'}`, () => {
        GM_setValue('hideSidebarOnScrollDown', !hideSidebarOnScrollDown); // 切换状态
        location.reload(); // 刷新页面应用新设置
    });
})();