Blocs de texte SEO compacts, commentaires occupant la moitié de l'écran, journaux d'administration et tableaux de 30 colonnes cassent la mise en page et obligent les lecteurs à faire défiler sans fin. Cela vous semble familier? Il existe une solution, et elle est étonnamment simple: un bloc avec une hauteur fixe et un défilement interne.

Quand j'ai commencé à construire des mises en page, je fourrais le contenu dans overflow: hidden en priant pour que personne ne remarque le texte coupé. Puis j'ai découvert les blocs défilants, et cela a tout changé: les textes SEO des clients sont devenus nets, les pages ont cessé de gonfler sur mobile, et les scripts voisins n'entraient plus en conflit.

Voici deux approches fonctionnelles: du CSS pur (pour la plupart des tâches) et un wrapper jQuery (pour les scénarios sur mesure). Les deux ont été éprouvées sur des dizaines de projets, fonctionnent correctement sur les appareils mobiles et n'interfèrent pas avec les scripts voisins.

💡 Aperçu rapide:

• Enveloppez le contenu dans un <div> avec les classes scroll-block et scroll-content
• Définissez max-height + overflow-y: auto en CSS, le bloc défilant est prêt
• Connectez le plugin jQuery de l'article pour le défilement automatique, l'animation et les événements
• Stylisez la barre de défilement via ::-webkit-scrollbar pour l'accorder au design de votre site

Qu'est-ce qu'un bloc défilant et où en avez-vous réellement besoin

Un bloc défilant est un conteneur à hauteur fixe dont le contenu défile de manière interne, indépendamment du défilement principal de la page. Le navigateur ajoute automatiquement une barre de défilement lorsque le contenu dépasse la hauteur définie.

Où j'applique constamment cette solution:

• Textes SEO. Le client veut un pavé de 3 000 mots au milieu d'une page d'atterrissage, je l'enveloppe dans un bloc défilant, la page ne se transforme pas en un canevas sans fin.
• Commentaires et journaux. Longs fils de discussion ou journaux de débogage dans le panneau d'administration, une hauteur fixe évite à l'interface de s'étaler.
• Tableaux de données. Le défilement horizontal pour les tableaux est un classique, mais le défilement vertical sur un tableau de plus de 50 lignes résout le problème tout aussi bien.
• Widgets de chat et notifications. Une fenêtre de chat avec l'historique des messages, même principe de bloc défilant, simplement avec un défilement automatique vers le dernier message.

Techniquement, tout repose sur deux propriétés CSS: max-height (ou height) et overflow-y. Mais le diable se cache dans les détails: les navigateurs mobiles, les conteneurs imbriqués, les conflits avec position: fixed et les particularités de Safari sur iOS exigent une approche minutieuse.

Consultez ce court tutoriel sur la propriété overflow, il montre clairement tous les modes de défilement et leur comportement:

Solution CSS: rapide et sans JavaScript

Dans la grande majorité des cas, JavaScript n'est pas nécessaire. Trois lignes de CSS suffisent:

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

Détaillons. max-height fixe le plafond, le bloc ne dépassera pas 320px mais peut être plus court s'il y a moins de contenu. overflow-y: auto indique au navigateur: «affiche la barre de défilement uniquement quand le contenu déborde du conteneur». La bordure et le padding sont optionnels, mais sans padding, le texte colle à la barre de défilement et donne un aspect peu soigné.

Le HTML reste sémantiquement propre:

1
<div class="scroll-block">
2
    <p>Your long SEO text, logs, table, or whatever.</p>
3
</div>

Cette solution fonctionne de manière identique sur Chrome, Firefox, Safari et Edge, la spécification overflow est stable depuis CSS2 et est prise en charge par tous les navigateurs modernes. Sur les appareils mobiles, le défilement à l'intérieur du bloc n'entre pas en conflit avec le défilement principal de la page (contrairement aux astucieuses solutions JavaScript des années 2010 qui capturaient touchmove et cassaient souvent le défilement).

Mais il y a une nuance avec Safari sur iOS: par défaut, le défilement à l'intérieur du bloc est «inélastique», il n'y a pas d'effet de rebond natif. Si vous avez besoin d'un défilement inertiel fluide comme le contenu principal, ajoutez:

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

La propriété -webkit-overflow-scrolling: touch active le défilement inertiel natif sur iOS. Note: avec iOS 13, Apple en a fait le comportement par défaut pour overflow: auto, donc pour les versions récentes, le préfixe est optionnel. Mais si le projet prend en charge d'anciens iPads, conservez-le.

Solution jQuery: quand vous avez besoin d'un contrôle total

La méthode CSS résout la plupart des tâches. Les cas restants sont ceux où vous avez besoin d'un défilement programmatique vers le bas (chat), d'événements personnalisés lorsque l'utilisateur atteint les limites du bloc, ou d'une animation de défilement via un bouton. C'est là que jQuery intervient.

Voici un plugin prêt à l'emploi, minimal, sans dépendance autre que jQuery lui-même, testé sur des projets avec des versions modernes de WordPress et qui n'entre pas en conflit avec les autres scripts du thème:

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

Où le lancer: votre script (fichier JS séparé du thème ou section <script> dans le pied de page). Incluez-le après jQuery:

1
$(document).ready(function() {
2
    $('.scroll-content').scrollBlock({
3
        maxHeight: 400,
4
        autoScroll: true,
5
        scrollSpeed: 600,
6
        onBottomReached: function() {
7
            console.log('Reached bottom of block');
8
        }
9
    });
10
});

Ce qui se passe ici: le plugin prend un sélecteur, applique une limite de hauteur CSS, fait éventuellement défiler le bloc vers le bas et suit l'atteinte des limites haute et basse via des callbacks. Pas de magie, juste un wrapper autour des méthodes jQuery standard .css(), .animate() et de l'événement scroll.

Utilisez cette solution quand: a) vous devez faire défiler automatiquement un chat vers le dernier message, b) une animation de défilement fluide via un bouton externe «Bas» / «Haut» est requise, c) vous devez attacher des analytics à l'événement «l'utilisateur a lu jusqu'à la fin».

Plusieurs blocs sur une même page

Scénario: trois blocs défilants avec un contenu différent sur la page. Si vous définissez une seule classe .scroll-block sans identifiants uniques, tout fonctionne, le CSS s'applique à tous en même temps. Mais dès que chaque bloc a besoin de sa propre hauteur, bienvenue dans le monde des ID.

CSS pour plusieurs blocs avec des hauteurs différentes:

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
    <!-- Long SEO text -->
3
</div>
4
 
5
<div id="changelog-block" class="scroll-block">
6
    <!-- Changelog list -->
7
</div>

Avec le plugin jQuery, même logique: initialisez chaque bloc séparément avec ses propres paramètres:

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

S'il y a beaucoup de blocs (plus de 10) et qu'ils sont tous identiques, une classe commune suffit. S'ils sont différents, des ID plus des paramètres individuels. Pas de magie avec nth-child ou d'itération manuelle, les sélecteurs CSS gèrent cela de base.

Styliser la barre de défilement: pour qu'elle ne ressemble pas à 2007

La barre de défilement par défaut du navigateur est un rectangle gris de l'ère Windows XP. Deux minutes de CSS, et elle s'intègre à votre design:

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
}

Important: les pseudo-éléments ::-webkit-scrollbar fonctionnent sur Chrome, Edge, Safari et Opera, couvrant la grande majorité des utilisateurs. Firefox utilise des propriétés distinctes scrollbar-width: thin et scrollbar-color, mais vous ne pouvez pas styliser globalement la barre de défilement dans Firefox au niveau de l'élément (seulement à l'échelle de la page). Pour Firefox, ceci est suffisant:

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

N'exagérez pas la largeur de la barre de défilement: 4 à 8px est la plage optimale. Plus fine que 4px, les utilisateurs ne pourront pas la toucher avec le doigt sur mobile. Plus large que 8px, la barre de défilement commence à trop attirer l'attention.

⁉️🤔 Foire aux questions

Le bloc défilant fonctionne-t-il sur les appareils mobiles?

Oui, et sans astuce. La propriété CSS overflow-y: auto est prise en charge nativement par Safari iOS et Chrome pour Android. Le défilement interne du bloc n'entre pas en conflit avec le défilement principal de la page, le navigateur détermine quel conteneur faire défiler en fonction de la position du doigt. Seule nuance: sur les anciens iOS (avant la version 13), ajoutez -webkit-overflow-scrolling: touch pour le défilement inertiel.

Peut-on utiliser un bloc défilant à l'intérieur d'un conteneur Flexbox ou Grid?

Vous pouvez. Le bloc défilant a besoin d'une hauteur fixe, définissez-la via max-height en pixels ou via flex-basis/grid-row avec une valeur absolue. N'utilisez pas de hauteur en pourcentage à l'intérieur d'un enfant flex sans hauteur explicite sur le parent, le navigateur ne peut pas calculer la base pour le calcul du débordement, et le défilement n'apparaîtra pas.

Comment faire un défilement fluide du bloc vers le bas sans jQuery?

En JavaScript pur: element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }). La méthode scrollTo avec l'option behavior: 'smooth' est prise en charge par tous les navigateurs modernes. Pour le défilement automatique d'un chat, appelez cette ligne après l'ajout de chaque nouveau message.

Le bloc défilant entre-t-il en conflit avec d'autres scripts sur la page?

Solution CSS, non. Ce sont des propriétés natives du navigateur, elles fonctionnent de manière isolée. Le plugin jQuery de l'article utilise son propre espace de noms $.fn.scrollBlock et ne touche pas aux variables globales, les conflits sont donc exclus. Testé sur des sites avec plus de 20 plugins actifs, aucun problème n'est apparu.

Peut-on animer l'apparition d'un bloc défilant?

Oui. Ajoutez max-height: 0 et overflow: hidden à l'état initial, puis animez jusqu'à la hauteur cible. Une fois l'animation terminée, passez overflow à auto. En jQuery, cela se fait via .animate({ 'max-height': '320px' }, 500, function() { $(this).css('overflow-y', 'auto') }). En CSS pur, via transition: max-height 0.5s ease.

JQuery ou CSS: que choisir en 2026

La solution CSS couvre la grande majorité des scénarios et pèse zéro kilo-octet. Si vous avez simplement besoin d'un bloc net avec défilement interne, adoptez-la et ne compliquez pas les choses.

Le plugin jQuery se justifie quand: vous construisez un chat avec défilement automatique, attachez des analytics aux événements de défilement, ou animez le défilement via un bouton externe. Dans les autres cas, le wrapper jQuery est une solution excessive qui ajoute une dépendance à une bibliothèque pour trois lignes de CSS.

Essayez la variante CSS dès maintenant: copiez trois lignes de styles, enveloppez un contenu de test dans <div class="scroll-block"> et ouvrez la page sur votre téléphone. Vous verrez les résultats en une minute, sans npm install, sans bundlers, sans difficulté.