Vegg-til-vegg-SEO-tekster, kommentarer som dekker halve skjermen, adminlogger og tabeller med 30 kolonner ødelegger layouten og tvinger leserne til å scrolle i det uendelige. Høres det kjent ut? Det finnes en løsning, og den er pinlig enkel: en blokk med fast høyde og intern scrolling.

Da jeg først begynte å bygge layouter, stappet jeg innhold inn i overflow: hidden og ba til at ingen skulle legge merke til den avkuttede teksten. Så oppdaget jeg rulleblokker, og det forandret alt: kundenes SEO-tekster ble ryddige, sidene sluttet å blåse seg opp på mobil, og nærliggende skript kom ikke lenger i konflikt.

Nedenfor finner du to fungerende tilnærminger: ren CSS (for de fleste oppgaver) og en jQuery-wrapper (for spesialtilfeller). Begge er kamptestet på dusinvis av prosjekter, fungerer korrekt på mobile enheter og forstyrrer ikke nærliggende skript.

💡 Rask oversikt:

• Pakk innhold inn i en <div> med klassene scroll-block og scroll-content
• Sett max-height + overflow-y: auto i CSS, så er rulleblokken klar
• Koble til jQuery-pluginen fra artikkelen for autoscroll, animasjon og hendelser
• Style rullefeltet via ::-webkit-scrollbar for å matche nettstedets design

Hva er en rulleblokk og hvor du faktisk trenger den

En rulleblokk er en beholder med fast høyde der innholdet ruller internt, uavhengig av sidens hovedrulling. Nettleseren legger automatisk til et rullefelt når innholdet overstiger den angitte høyden.

Her er hvor jeg stadig bruker denne løsningen:

• SEO-tekster. Kunden vil ha en vegg på 3000 ord midt på en landingsside, jeg pakker den inn i en rulleblokk, og siden blir ikke et endeløst lerret.
• Kommentarer og logger. Lange diskusjonstråder eller feilsøkingslogger i adminpanelet, fast høyde redder grensesnittet fra å flyte utover.
• Datatabeller. Horisontal rulling for tabeller er klassisk, men vertikal rulling på en tabell med 50+ rader løser problemet like godt.
• Chat-widgeter og varsler. Et chatvindu med meldingshistorikk, samme rulleblokk, bare med autoscroll til siste melding.

Teknisk sett hviler alt på to CSS-egenskaper: max-height (eller height) og overflow-y. Men djevelen ligger i detaljene: mobilnettlesere, nestede beholdere, konflikter med position: fixed og særegenheter i iOS Safari krever en nøye tilnærming.

Sjekk ut denne korte veiledningen om overflow-egenskapen, den viser tydelig alle rullemoduser og deres oppførsel:

CSS-løsning: raskt og uten JavaScript

I de aller fleste tilfeller er ikke JavaScript nødvendig. Tre linjer med CSS er nok:

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

La oss bryte det ned. max-height setter taket, blokken blir ikke høyere enn 320 piksler, men kan være lavere hvis det er mindre innhold. overflow-y: auto forteller nettleseren: «vis rullefeltet bare når innholdet flyter over beholderen.» Kantlinje og polstring er valgfritt, men uten polstring klistrer teksten seg til rullefeltet og ser billig ut.

HTML-en forblir semantisk ren:

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

Denne løsningen fungerer identisk i Chrome, Firefox, Safari og Edge, overflow-spesifikasjonen har vært stabil siden CSS2 og støttes av alle moderne nettlesere. På mobile enheter kommer ikke rulling inne i blokken i konflikt med sidens hovedrulling (i motsetning til smarte JavaScript-løsninger fra 2010-tallet som fanget opp touchmove og ofte ødela rullingen).

Men det er en nyanse med iOS Safari: som standard er rulling inne i blokken «uelastisk», det er ingen naturlig gummi-bånd-effekt. Hvis du trenger jevn treghetsrulling som hovedinnholdet, legg til:

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

Egenskapen -webkit-overflow-scrolling: touch aktiverer naturlig momentrulling på iOS. Merk: med iOS 13 gjorde Apple dette til standardoppførsel for overflow: auto, så for nyere versjoner er prefikset valgfritt. Men hvis prosjektet støtter gamle iPader, behold det.

JQuery-løsning: når du trenger full kontroll

CSS-metoden løser de fleste oppgaver. De resterende tilfellene er når du trenger programmatisk rulling til bunn (chat), egendefinerte hendelser når du når blokkens grenser, eller rulleanimasjon via knapp. Det er her jQuery kommer inn.

Her er en ferdig plugin, minimal, ingen avhengigheter utenom jQuery selv, testet på prosjekter med moderne WordPress-versjoner og kommer ikke i konflikt med andre temaskript:

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

Hvor du starter den: ditt skript (separat tema-JS-fil eller <script>-seksjon i footeren). Inkluder etter 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
});

Hva som skjer her: pluginen tar en selektor, påfører en CSS-høydegrense, ruller eventuelt blokken til bunn og sporer når topp-/bunngrenser nås via tilbakeringinger. Ingen magi, bare en wrapper over standard jQuery-metoder .css(), .animate() og scroll-hendelsen.

Bruk denne løsningen når: a) du trenger å autoscrolle chat til siste melding, b) jevn rulleanimasjon via ekstern «Ned»/«Opp»-knapp er påkrevd, c) du trenger å knytte analyse til hendelsen «bruker leste til slutten».

Flere blokker på én side

Scenario: tre rulleblokker med forskjellig innhold på siden. Hvis du setter én klasse .scroll-block uten unike identifikatorer, fungerer alt, CSS gjelder for alle samtidig. Men så snart hver blokk trenger sin egen høyde, velkommen til ID-enes verden.

CSS for flere blokker med forskjellige høyder:

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>

Med jQuery-pluginen, samme logikk: initialiser hver blokk separat med sine egne innstillinger:

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

Hvis det er mange blokker (10+) og alle er identiske, er en felles klasse nok. Hvis de er forskjellige, ID-er pluss individuelle innstillinger. Ingen magi med nth-child eller manuell iterasjon, CSS-selektorer håndterer dette rett ut av boksen.

Styling av rullefeltet: så det ikke ser ut som 2007

Standard rullefelt i nettleseren er et grått rektangel fra Windows XP-tiden. To minutter med CSS, og det passer inn i designet ditt:

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
}

Viktig: ::-webkit-scrollbar-pseudoelementer fungerer i Chrome, Edge, Safari og Opera, og dekker det store flertallet av brukere. Firefox bruker separate egenskaper scrollbar-width: thin og scrollbar-color, men du kan ikke style rullefeltet globalt i Firefox på elementnivå (bare sideomfattende). For Firefox er dette nok:

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

Ikke overdriv bredden på rullefeltet: 4-8 piksler er det optimale området. Tynnere enn 4 piksler, treffer ikke brukerne det med fingeren på mobil. Tykkere enn 8 piksler, begynner rullefeltet å trekke for mye oppmerksomhet.

⁉️🤔 Ofte stilte spørsmål

Fungerer rulleblokken på mobile enheter?

Ja, og uten hacks. CSS-egenskapen overflow-y: auto støttes naturlig av iOS Safari og Chrome for Android. Blokkens interne rulling kommer ikke i konflikt med sidens hovedrulling, nettleseren avgjør hvilken beholder som skal rulles basert på fingerposisjon. Eneste nyanse: på gammel iOS (før 13), legg til -webkit-overflow-scrolling: touch for treghetsrulling.

Kan du bruke en rulleblokk inne i en Flexbox- eller Grid-beholder?

Det kan du. Rulleblokken trenger fast høyde, sett den via max-height i piksler eller via flex-basis/grid-row med en absolutt verdi. Ikke bruk prosentvis høyde inne i et flex-barn uten eksplisitt høyde på forelderen, nettleseren kan ikke beregne grunnlaget for overflow-beregning, og rulling vil ikke vises.

Hvordan lage jevn rulling av blokken til bunn uten jQuery?

I ren JavaScript: element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }). Metoden scrollTo med behavior: 'smooth'-alternativet støttes av alle moderne nettlesere. For chat-autoscroll, kall denne linjen etter å ha lagt til hver ny melding.

Kommer rulleblokken i konflikt med andre skript på siden?

CSS-løsning, nei. Dette er naturlige nettleseregenskaper, de fungerer isolert. jQuery-pluginen fra artikkelen bruker sitt eget navnerom $.fn.scrollBlock og rører ikke globale variabler, så konflikter er utelukket. Testet på nettsteder med 20+ aktive pluginer, ingen problemer oppsto.

Kan du animere utseendet til en rulleblokk?

Ja. Legg til max-height: 0 og overflow: hidden i starttilstanden, animer deretter til målhøyde. Når animasjonen er fullført, bytt overflow til auto. I jQuery gjøres dette via .animate({ 'max-height': '320px' }, 500, function() { $(this).css('overflow-y', 'auto') }). I ren CSS, via transition: max-height 0.5s ease.

JQuery eller CSS: hva du bør bruke i 2026

CSS-løsningen dekker det store flertallet av scenarier og veier null kilobyte. Hvis du bare trenger en ryddig blokk med intern rulling, bruk den og ikke overkompliser.

jQuery-pluginen er berettiget når: du bygger en chat med autoscroll, knytter analyse til rullehendelser eller animerer rulling via en ekstern knapp. I andre tilfeller er jQuery-wrapperen en overdreven løsning som legger til en biblioteksavhengighet for tre linjer med CSS.

Prøv CSS-varianten nå: kopier tre linjer med stiler, pakk testinnhold inn i <div class="scroll-block">, og åpne siden på telefonen din. Du ser resultater på et minutt, uten npm install, uten bundlere, uten smerte.