Довжелезні 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, без збирачів, без болю.