admin管理员组文章数量:1640010
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://m.elefans.com/dianzi/1729307827a1195148.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论