自己动手写油猴脚本 - 简单优化微信读书网页版阅读体验

1. 微信读书网页版的问题：

• 内容居中未充满整个body(强迫症)，右侧的下滑滚动条影响全屏时候的阅读体验。
  

2. 解决方法

• 使用油猴脚本(没有Tampermonkey，请自行百度安装)来修改网页源码，使文字内容充满整个 body，隐藏右侧的滚动条且能保持滚动。
• 使文字充满整个body只需修改文字所在div的width为100%，让右侧菜单浮动到最右侧，需设置菜单所在div的left值为inherit，并设置right为0，因为菜单布局为fixed。
• 隐藏滚动条且能保持滚动的方法：

/*Webkit 内核（Chrome, Safari）:*/
body::-webkit-scrollbar {
	width: 0px;
	height: 0px;
}
/*Gecko 内核(firefox):*/
body {
  scrollbar-width: none;
}
/*IE内核 (IE, Edge)：*/
body {
  -ms-overflow-style:none;
}

3. 脚本源码

// ==UserScript==
// @name         微信读书优化插件
// @namespace    sunshine
// @version      0.1
// @description  优化微信读书的网页版体验
// @author       sunhaojie
// @match        https://weread.qq.com/web/reader/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    //隐藏右侧滚动条，让全屏的时候更加有沉浸感
    var style = document.createElement("style");
    style.type = "text/css";
    var text = document.createTextNode("body::-webkit-scrollbar { width: 0px; height: 0px;}");
    style.appendChild(text);
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
    //文字内容
    var app = document.getElementsByClassName("app_content")[0];
    app.style.maxWidth = "100%";
    //顶部导航栏
    var readerTopBar = document.getElementsByClassName("readerTopBar")[0];
    readerTopBar.style.maxWidth = "100%";
    //右侧浮动菜单
    var readerControls = document.getElementsByClassName("readerControls")[0];
    readerControls.style.marginLeft="0";
    readerControls.style.left= "inherit";
    readerControls.style.right= "0%";

})();

4. 最终效果