admin管理员组

文章数量:1640015

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/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. 最终效果

本文标签： 自己动手脚本简单网页写油猴

版权声明：本文标题：自己动手写油猴脚本 - 简单优化微信读书网页版阅读体验 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729307827a1195148.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。