Длиннющие SEO-простыни, комментарии на пол-экрана, логи в админке и таблицы на 30 столбцов, всё это ломает вёрстку и заставляет читателя крутить колесо до бесконечности. Знакомо? Решение есть, и оно до неприличия простое: блок с фиксированной высотой и внутренним скроллом.

Когда я только начинал верстать, то пихал контент в overflow: hidden и молился, чтобы никто не заметил обрезанный текст. Потом пришёл к скролл-блоку, и это изменило всё: SEO-тексты заказчиков стали аккуратными, страницы перестали раздуваться на мобилках, а соседние скрипты больше не конфликтовали.

Ниже, два работающих подхода: чистый CSS (для большинства задач) и jQuery-обёртка (для кастомных сценариев). Оба проверены в бою на десятках проектов, корректно работают на мобильных устройствах и не цепляют соседние скрипты.

💡 Быстрый обзор:

• Оберните контент в <div> с классами scroll-block и scroll-content
• Задайте в CSS max-height + overflow-y: auto, скролл-блок готов
• Подключите jQuery-плагин из статьи для авто-скролла, анимации и событий
• Стилизуйте скроллбар через ::-webkit-scrollbar под дизайн сайта

Что такое скролл-блок и где он реально нужен

Скролл-блок, это контейнер с фиксированной высотой, содержимое которого прокручивается внутри независимо от основного скролла страницы. Браузер добавляет полосу прокрутки автоматически, когда контент превышает заданную высоту.

Где я применяю это решение постоянно:

• SEO-тексты. Заказчик хочет простыню на 3000 слов в середине лендинга, оборачиваю в скролл-блок, страница не превращается в бесконечное полотно.
• Комментарии и логи. Длинные цепочки обсуждений или отладочные логи в админке, фиксированная высота спасает интерфейс от расползания.
• Таблицы с данными. Горизонтальный скролл для таблиц, классика, но вертикальный скролл у таблицы с 50+ строками решает проблему не хуже.
• Чат-виджеты и уведомления. Окно чата с историей сообщений, тот же скролл-блок, только с авто-прокруткой до последнего сообщения.

Технически всё держится на двух CSS-свойствах: max-height (или height) и overflow-y. Но дьявол в деталях, мобильные браузеры, вложенные контейнеры, конфликты с position: fixed и особенности iOS Safari требуют аккуратного подхода.

Посмотрите короткий туториал по свойству overflow, в нём наглядно показаны все режимы прокрутки и их поведение:

CSS-решение: быстро и без JavaScript

Для подавляющего большинства случаев JavaScript не нужен. Достаточно трёх строк CSS:

1
.scroll-block {
2
    max-height: 320px;
3
    overflow-y: auto;
4
    border: 1px solid #e0e0e0;
5
    padding: 16px;
6
}

Разбор по косточкам. max-height задаёт потолок, блок не вырастет выше 320px, но может быть меньше, если контента мало. overflow-y: auto говорит браузеру: «покажи скроллбар только когда контент переполнит контейнер». Бордер и паддинг, опционально, но без паддинга текст прилипает к скроллбару, смотрится дёшево.

HTML при этом остаётся семантически чистым:

1
<div class="scroll-block">
2
    <p>Ваш длинный SEO-текст, логи, таблица или что угодно.</p>
3
</div>

Это решение работает одинаково в Chrome, Firefox, Safari и Edge, спецификация overflow стабильна с CSS2 и поддерживается всеми современными браузерами. На мобильных устройствах скролл внутри блока не конфликтует с основным скроллом страницы (в отличие от хитрых JavaScript-решений из 2010-х, которые ловили touchmove и часто ломали прокрутку).

Но есть нюанс с iOS Safari: по умолчанию скролл внутри блока «неупругий», нет нативного rubber-band-эффекта. Если нужен плавный инерционный скролл как у основного контента, добавьте:

1
.scroll-block {
2
    -webkit-overflow-scrolling: touch;
3
}

Свойство -webkit-overflow-scrolling: touch включает нативный momentum-скролл на iOS. Учтите: с выходом iOS 13 Apple сделала это поведение по умолчанию для overflow: auto, так что для свежих версий префикс опционален. Но если проект поддерживает старые iPad, оставьте.

jQuery-решение: когда нужен полный контроль

CSS-способ решает большинство задач. Оставшиеся случаи, это когда вам нужна программная прокрутка до низа (чат), кастомные события при достижении границ блока или анимация скролла по кнопке. Здесь подключается jQuery.

Кладу готовый плагин, минимальный, без зависимостей кроме самой jQuery, проверен на проектах с современными версиями WordPress и не конфликтует с другими скриптами в теме:

1
(function($) {
2
    $.fn.scrollBlock = function(options) {
3
        var settings = $.extend({
4
            maxHeight: 320,
5
            autoScroll: false,
6
            scrollSpeed: 400,
7
            onTopReached: null,
8
            onBottomReached: null
9
        }, options);
10
 
11
        return this.each(function() {
12
            var $block = $(this);
13
 
14
            $block.css({
15
                'max-height': settings.maxHeight + 'px',
16
                'overflow-y': 'auto'
17
            });
18
 
19
            if (settings.autoScroll) {
20
                $block.animate({
21
                    scrollTop: $block[0].scrollHeight
22
                }, settings.scrollSpeed);
23
            }
24
 
25
            $block.on('scroll', function() {
26
                var scrollTop = $block.scrollTop();
27
                var maxScroll = $block[0].scrollHeight - $block.outerHeight();
28
 
29
                if (scrollTop <= 0 && settings.onTopReached) {
30
                    settings.onTopReached.call(this);
31
                }
32
                if (scrollTop >= maxScroll && settings.onBottomReached) {
33
                    settings.onBottomReached.call(this);
34
                }
35
            });
36
        });
37
    };
38
})(jQuery);

Место запуска, ваш скрипт (отдельный JS-файл темы или секция <script> в футере). Подключение после jQuery:

1
$(document).ready(function() {
2
    $('.scroll-content').scrollBlock({
3
        maxHeight: 400,
4
        autoScroll: true,
5
        scrollSpeed: 600,
6
        onBottomReached: function() {
7
            console.log('Достигнут низ блока');
8
        }
9
    });
10
});

Что здесь происходит: плагин принимает селектор, вешает CSS-ограничение по высоте, опционально прокручивает блок до низа и отслеживает достижение верхней/нижней границы через колбэки. Никакой магии, обёртка над стандартными jQuery-методами .css(), .animate() и событием scroll.

Использовать это решение стоит когда: а) нужно авто-прокрутить чат до последнего сообщения; б) требуется плавная анимация скролла по внешней кнопке «Вниз» / «Вверх»; в) надо повесить аналитику на событие «пользователь дочитал до конца».

Несколько блоков на одной странице

Ситуация: на странице три скролл-блока с разным контентом. Если задать один класс .scroll-block без уникальных идентификаторов, всё работает, CSS применяется ко всем сразу. Но как только каждому блоку нужна своя высота, добро пожаловать в мир ID.

CSS под несколько блоков с разной высотой:

1
#seo-text-block {
2
    max-height: 320px;
3
    overflow-y: auto;
4
}
5
 
6
#changelog-block {
7
    max-height: 480px;
8
    overflow-y: auto;
9
}
10
 
11
#comments-block {
12
    max-height: 600px;
13
    overflow-y: auto;
14
}

HTML:

1
<div id="seo-text-block" class="scroll-block">
2
    <!-- Длинный SEO-текст -->
3
</div>
4
 
5
<div id="changelog-block" class="scroll-block">
6
    <!-- Список изменений -->
7
</div>

С jQuery-плагином та же логика, инициализируете каждый блок отдельно со своими настройками:

1
$('#seo-text-block').scrollBlock({ maxHeight: 320 });
2
$('#changelog-block').scrollBlock({ maxHeight: 480, autoScroll: true });
3
$('#comments-block').scrollBlock({ maxHeight: 600, autoScroll: true, scrollSpeed: 300 });

Если блоков много (10+) и все одинаковые, хватит общего класса. Если разные, ID плюс индивидуальные настройки. Никакой магии с nth-child или ручным перебором, CSS-селекторы разруливают это из коробки.

Стилизация скроллбара: чтобы не выглядело как 2007 год

Браузерный скроллбар по умолчанию, серый прямоугольник из эпохи Windows XP. Две минуты CSS, и он вписывается в дизайн:

1
.scroll-block::-webkit-scrollbar {
2
    width: 6px;
3
}
4
 
5
.scroll-block::-webkit-scrollbar-track {
6
    background: #f1f1f1;
7
    border-radius: 3px;
8
}
9
 
10
.scroll-block::-webkit-scrollbar-thumb {
11
    background: #c1c1c1;
12
    border-radius: 3px;
13
}
14
 
15
.scroll-block::-webkit-scrollbar-thumb:hover {
16
    background: #a1a1a1;
17
}

Важно: псевдо-элементы ::-webkit-scrollbar работают в Chrome, Edge, Safari и Opera, то есть покрывают подавляющее большинство пользователей. Firefox использует отдельные свойства scrollbar-width: thin и scrollbar-color, но глобально стилизовать скроллбар в Firefox на уровне элемента нельзя (только на уровне всей страницы). Для Firefox достаточно:

1
html {
2
    scrollbar-width: thin;
3
    scrollbar-color: #c1c1c1 #f1f1f1;
4
}

Не перебарщивайте с шириной скроллбара: 4-8px, оптимальный диапазон. Тоньше 4px, пользователь не попадёт пальцем на мобильном. Толще 8px, скроллбар начинает перетягивать внимание на себя.

⁉️🤔 Частые вопросы

Работает ли скролл-блок на мобильных устройствах?

Да, и без костылей. CSS-свойство overflow-y: auto нативно поддерживается iOS Safari и Chrome для Android. Внутренний скролл блока не конфликтует с основным скроллом страницы, браузер сам определяет, какой контейнер прокручивать, по положению пальца. Единственный нюанс: на старых iOS (до 13) добавьте -webkit-overflow-scrolling: touch для инерционного скролла.

Можно ли использовать скролл-блок внутри Flexbox или Grid-контейнера?

Можно. Скролл-блоку нужна фиксированная высота, задайте её через max-height в пикселях или через flex-basis / grid-row с абсолютным значением. Не используйте процентную высоту внутри flex-потомка без явной высоты у родителя, браузер не сможет вычислить базу для расчёта переполнения, и скролл не появится.

Как сделать плавную прокрутку блока до низа без jQuery?

На чистом JavaScript: element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }). Метод scrollTo с опцией behavior: 'smooth' поддерживается всеми современными браузерами. Для авто-прокрутки чата вызывайте эту строку после добавления каждого нового сообщения.

Конфликтует ли скролл-блок с другими скриптами на странице?

CSS-решение, нет. Это нативные свойства браузера, они работают изолированно. jQuery-плагин из статьи использует собственное пространство имён $.fn.scrollBlock и не трогает глобальные переменные, так что конфликты исключены. Проверено на сайтах с 20+ активными плагинами, проблем не возникало.

Можно ли анимировать появление скролл-блока?

Да. Добавьте max-height: 0 и overflow: hidden в исходное состояние, затем анимируйте до целевой высоты. Когда анимация завершится, переключите overflow на auto. На jQuery это делается через .animate({ 'max-height': '320px' }, 500, function() { $(this).css('overflow-y', 'auto') }). На чистом CSS, через transition: max-height 0.5s ease.

jQuery или CSS: что ставить в 2026 году

CSS-решение закрывает подавляющее большинство сценариев и весит ноль килобайт. Если вам нужен просто аккуратный блок с внутренней прокруткой, берите его и не усложняйте.

jQuery-плагин оправдан когда: делаете чат с автоскроллом, вешаете аналитику на события прокрутки или анимируете скролл по внешней кнопке. В остальных случаях jQuery-обёртка, избыточное решение, которое добавляет зависимость от библиотеки ради трёх строк CSS.

Попробуйте CSS-вариант прямо сейчас: скопируйте три строки стилей, оберните тестовый контент в <div class="scroll-block"> и откройте страницу на телефоне. Результат увидите через минуту, без npm install, без сборщиков, без боли.