用 CSS 和 JavaScript 移除软付费墙
有些付费墙把整篇文章发给你，然后把它藏在一个灰色遮罩层后面，并锁住页面让你无法滚动。文字已经在你的浏览器里 —— 你只是读不到它。本文介绍如何用 CSS 和 JavaScript 移除那个遮罩层。先讲一个重要的区分，再说一段关于伦理的诚实提示。
软付费墙与硬付费墙
这一点很重要，所以先读它。
- 软付费墙把完整的文章 HTML 发到你的浏览器，然后把它藏起来：一个遮罩层、一个滚动锁定、一层模糊、一个
max-height钳制。内容就在 DOM 里。你可以在 DevTools 里确认 —— 打开 Elements 面板，搜索文章里的某一段；如果它在那里，付费墙就是软的。 - 硬付费墙根本不发送正文。服务器检查你的订阅，只有通过才返回文字。DOM 里只有一段引子，别无他物。没有任何 CSS 或 JavaScript 能凭空变出从未送达的内容。
本文只讲软付费墙 —— 恢复那些已经待在你浏览器里的文字的可见性。你无法绕过硬付费墙，也不应该尝试。
关于伦理与法律的诚实提示
优质新闻的生产是要花钱的。软付费墙是发行方押注「唠叨」比「封锁」更有效。在你自己的浏览器里给页面重新换皮是合法的 —— 这与让广告拦截器和阅读模式得以存在的是同一种权利 —— 但合法并非故事的全部。
做一个体面的读者：如果你依赖某家刊物，就订阅它。把这些技巧用在偶尔的一次性文章、用于无障碍访问，或读朋友发给你的东西 —— 而不是当作再也不为新闻付费的手段。被你抽走资金的新闻编辑部最终会关门。
找出是什么藏起了文章
打开 DevTools 的 Elements 面板。软付费墙用一小套把戏，通常是组合使用：
- 一个固定定位、高
z-index的div盖住文章 —— 遮罩层。 <body>上的overflow: hidden或position: fixed—— 滚动锁定。- 下方段落上的
filter: blur()。 - 文章容器上的
max-height加overflow: hidden—— 淡出钳制。
点一点遮罩元素，读它的计算样式。记下类名 —— 你接下来要瞄准它们。
移除遮罩层
遮罩层是叠在最上面的一个独立元素。用 CSS 把它隐藏：
/* Common paywall overlay class and ID patterns */
.paywall,
.paywall-overlay,
.subscription-wall,
.piano-overlay,
.tp-modal,
.tp-backdrop,
[class*="paywall" i],
[class*="metering" i],
[id*="paywall" i] {
display: none !important;
}用 i 标志做大小写不敏感的属性匹配，就像处理 cookie 横幅时那样。先宽泛起手，如果误伤了什么再收紧到具体的类。
解锁 body 滚动
如果页面仍然被冻住，隐藏遮罩层就毫无意义。软付费墙锁住滚动，让你够不到隐藏的文字。把它强行恢复：
/* Restore normal scrolling */
html, body {
overflow: auto !important;
position: static !important;
height: auto !important;
}如果某个脚本不断重新施加锁定，一条小小的 JS 规则可以靠循环清除内联样式来打败它：
// Re-assert scrolling against a script that keeps locking it
setInterval(() => {
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}, 400);去掉文字的模糊
许多付费墙让前两段保持清晰，把其余部分模糊掉作为引子。文字完全在那里 —— 只是失焦了。移除那个 filter：
/* Kill the blur teaser */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
filter: none !important;
-webkit-filter: none !important;
}如果模糊落在某个特定的子元素上，检查它并瞄准那个确切的类 —— 一刀切的 * { filter: none } 可能破坏页面其他地方正当的效果。
移除 max-height 钳制
另一个经典引子：文章容器有一个 max-height 和 overflow: hidden，于是你看到顶部和一段渐变淡出。把钳制解除：
/* Unclamp the article so the full text shows */
.article-body,
.post-content,
[class*="article" i][class*="clamp" i],
[class*="gated" i] {
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Remove the gradient fade element if it is a separate node */
.content-fade,
[class*="gradient-fade" i] {
display: none !important;
}整合成一条规则
每家发行方用的组合略有不同。在 JustZix 里高效的做法是每个站点一条规则，作用域收紧：
- 创建一条规则，URL 模式为
https://news.example.com/*。 - 把遮罩层、解锁滚动、去模糊和解钳制的 CSS 粘进 CSS 标签。
- 只有当某个脚本不断重新锁定页面时，才加上解锁滚动的 JS。
- 把这些规则放在一个叫「阅读」的文件夹里，方便你作为一组来审查和禁用。
因为规则限定在一个域，它绝不会影响一个你宁愿干脆订阅的站点。
另见
- 禁用暗黑模式与虚假紧迫感 —— 同样的技能，用在操纵性 UI 上。
- 为更好的 PDF 定制打印样式表 —— 在保存文章前把它清理干净。
- JustZix 应用场景 —— 更多以阅读为中心的规则。
对于偶尔藏在软遮罩层后面的文章，安装 JustZix 并写一条限定范围的规则。如果你经常读某家刊物 —— 就为它付费。那才是让文章源源不断的东西。
为这篇文章评分
暂无评分 — 成为第一个。