Убираем мягкие пейволлы с помощью CSS и JavaScript

16 мая 2026 · автор JustZix Team

Некоторые пейволлы присылают тебе всю статью, а потом прячут её за серым оверлеем и блокируют страницу так, что прокрутка не работает. Текст уже в твоём браузере — ты просто не можешь его прочитать. Эта статья показывает, как убрать такой оверлей с помощью CSS и JavaScript. Сначала важное различие и честная заметка про этику.

Мягкий пейволл против жёсткого

Это важно, так что прочти прежде всего остального.

Мягкий пейволл присылает в твой браузер полный HTML статьи, а потом прячет его: оверлей, блокировка прокрутки, размытие, ограничение по max-height. Контент есть в DOM. Это можно подтвердить в DevTools — открой панель Elements и поищи абзац статьи; если он там — пейволл мягкий.
Жёсткий пейволл вообще не присылает тело. Сервер проверяет твою подписку и только потом возвращает текст. В DOM лежит лишь анонс и больше ничего. Никакой CSS или JavaScript не наколдует контент, который вообще не был доставлен.

Эта статья только о мягких пейволлах — о восстановлении видимости текста, уже лежащего в твоём браузере. Жёсткий пейволл обойти нельзя, и пытаться не стоит.

Честная заметка про этику и закон

Качественная журналистика стоит денег. Мягкий пейволл — ставка издателя на то, что назойливость работает лучше блокировки. Перестилизовать страницу в собственном браузере законно — то же право, благодаря которому существуют блокировщики рекламы и режим чтения, — но законность это ещё не вся история.

Будь порядочным читателем: если ты полагаешься на издание, подпишись на него. Используй эти приёмы для случайной разовой статьи, для доступности или чтобы прочитать что-то, что прислал друг, — а не как способ больше никогда не платить за новости. Редакции, которые ты лишаешь финансирования, в итоге закрываются.

Находим то, что прячет статью

Открой DevTools, панель Elements. Мягкие пейволлы используют небольшой набор трюков, обычно в комбинации:

div с position: fixed и высоким z-index, накрывающий статью, — оверлей.
overflow: hidden или position: fixed на <body> — блокировка прокрутки.
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-правило победит его, очищая inline-стиль в цикле:

// 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);

Снимаем размытие с текста

Многие пейволлы оставляют первые два абзаца чёткими, а остальное размывают как анонс. Текст полностью на месте — он просто не в фокусе. Убери фильтр:

/* 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 и напиши одно ограниченное правило. А если ты читаешь издание часто — заплати за него. Именно это позволяет статьям выходить дальше.

Оцени эту статью

Оценок пока нет — оцени первым.