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

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

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

让iOS Safari浏览器支持油猴脚本
Userscripts 是一款免费 iOS Safari 浏览器插件,可以兼容油猴脚本,但如果油猴脚本代码没有对手机进行适配的话可能不会生效. 1.首先打开设置找到 Safari 浏览器选择扩 ...
超神，chatgpt帮你制作任意油猴脚本
场景: 超神,chatgpt帮你制作任意油猴脚本,为所欲为! 屏蔽网页所有非文字内容 // ==UserScript== // @name 屏55555 // @namespace none // @ ...
【教程、无技术含量】简单的油猴脚本编写教程
不建议阅读者: 前端大神想要深入学习(涉及到分析挖掘调用网站中js算法/自己写算法)油猴脚本的读者[备注:楼主也不会,楼主也很绝望啊...] 阅读以下内容所需知识: javascript/jQuer ...
自己动手编写一个在线保存百度谷歌搜索关键词历史记录的油猴脚本
标题快捷导航如何通过Web技术实现我们的需求需要的技术栈油猴脚本的编写浏览器扩展的编写后台部分小结如何通过Web技术实现我们的需求相信大家只要会一点前端和后端基础的,一看到这个标题就有 ...
杂谈技术·油猴脚本的功能实现
投稿地址: https://www.bilibili.com/read/cv15714192 原文简介核心原理核心原理其实超级简单,简单说就是通过DOM技术找到网页上面的关键点,然后将网页上的页面 ...
我的第一个油猴脚本--微博超话自动签到
简介用户脚本是一段代码,它们能够优化您的网页浏览体验.安装之后,有些脚本能为网站添加新的功能,有些能使网站的界面更加易用,有些则能隐藏网站上烦人的部分内容.其中常见的有油猴插件.ChromeExt ...
[原创方法!] 如何实现全自动登录各大网站? Cookie格式、油猴脚本基础解决Github邮箱验证,持久登录,免验证码
之前电脑内存小, 谷歌浏览器又是内存怪物, 每次浏览器不用的时候总是习惯关掉. 这就导致了每次进入常用的网站就要重新登陆, 非常烦; 对! 就是即使浏览器保存了密码, 大部分网站仍然要输入一下验证码 ...
【油猴脚本】生成纯元素CSS选择器（附开发笔记）
脚本介绍用途常见的CSS选择器: #gatsby-focus-wrapper > div > div > div.Box-nv15kw-0.Flex-arghxi-0.layou ...
Chrome插件与油猴脚本
Chrome插件与油猴脚本简介油猴脚本编写要点简介开发过Chrome插件的开发者,都会被Chrome插件的content,background(service),popup,inject 等各 ...

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

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

2. 解决方法

3. 脚本源码

4. 最终效果

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

最新文章

热门文章