Wall-of-text SEO-block, kommentarer som täcker halva skärmen, adminloggar och tabeller med 30 kolumner spränger layouten och tvingar läsare att scrolla i oändlighet. Känns det igen? Det finns en lösning, och den är pinsamt enkel: ett block med fast höjd och intern scroll.

När jag först började bygga layouter tryckte jag in innehåll i overflow: hidden och bad en stilla bön om att ingen skulle märka den avklippta texten. Sedan upptäckte jag scroll-block, och det förändrade allt: kundernas SEO-texter blev prydliga, sidor slutade svälla på mobilen och närliggande skript krockade inte längre.

Här nedan finns två fungerande tillvägagångssätt: ren CSS (för de flesta uppgifter) och ett jQuery-omslag (för anpassade scenarier). Båda är stridstestade på dussintals projekt, fungerar korrekt på mobila enheter och stör inte närliggande skript.

💡 Snabb överblick:

• Slå in innehåll i en <div> med klasserna scroll-block och scroll-content
• Sätt max-height + overflow-y: auto i CSS, så är scroll-blocket klart
• Koppla in jQuery-pluginet från artikeln för auto-scroll, animering och händelser
• Styla scrollbaren via ::-webkit-scrollbar för att matcha din webbplats design

Vad är ett scroll-block och var du faktiskt behöver det

Ett scroll-block är en behållare med fast höjd vars innehåll scrollar internt, oberoende av sidans huvudscroll. Webbläsaren lägger till en scrollbar automatiskt när innehållet överstiger den inställda höjden.

Var jag ständigt tillämpar den här lösningen:

• SEO-texter. Kunden vill ha en 3 000 ord lång vägg mitt på en landningssida, jag slår in den i ett scroll-block, sidan förvandlas inte till en oändlig duk.
• Kommentarer och loggar. Långa diskussionstrådar eller felsökningsloggar i adminpanelen, fast höjd räddar gränssnittet från att breda ut sig.
• Datatabeller. Horisontell scroll för tabeller är klassiskt, men vertikal scroll på en tabell med 50+ rader löser problemet lika bra.
• Chattwidgetar och notiser. Ett chattfönster med meddelandehistorik, samma scroll-block, bara med auto-scroll till det senaste meddelandet.

Tekniskt sett bygger allt på två CSS-egenskaper: max-height (eller height) och overflow-y. Men djävulen sitter i detaljerna: mobila webbläsare, nästlade behållare, konflikter med position: fixed och iOS Safaris egenheter kräver ett noggrant tillvägagångssätt.

Kolla in den här korta genomgången av egenskapen overflow, den visar tydligt alla scroll-lägen och deras beteende:

CSS-lösning: snabbt och utan JavaScript

I de allra flesta fall behövs inte JavaScript. Tre rader CSS räcker:

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

Vi bryter ner det. max-height sätter taket, blocket blir inte högre än 320px men kan vara lägre om det finns mindre innehåll. overflow-y: auto säger till webbläsaren: "visa scrollbaren endast när innehållet svämmar över behållaren." Kantlinje och padding är valfria, men utan padding klistrar texten fast vid scrollbaren och ser billigt ut.

HTML förblir semantiskt rent:

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

Den här lösningen fungerar identiskt i Chrome, Firefox, Safari och Edge, overflow-specifikationen har varit stabil sedan CSS2 och stöds av alla moderna webbläsare. På mobila enheter krockar inte scroll inuti blocket med sidans huvudscroll (till skillnad från smarta JavaScript-lösningar från 2010-talet som fångade touchmove och ofta förstörde scrollningen).

Men det finns en nyans med iOS Safari: som standard är scroll inuti blocket "oelastisk", det finns ingen inbyggd rubber-band-effekt. Om du behöver mjuk tröghetsscroll som huvudinnehållet, lägg till:

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

Egenskapen -webkit-overflow-scrolling: touch aktiverar inbyggd momentum-scroll på iOS. Notera: med iOS 13 gjorde Apple detta till standardbeteende för overflow: auto, så för senare versioner är prefixet valfritt. Men om projektet stöder gamla iPads, behåll det.

JQuery-lösning: när du behöver full kontroll

CSS-metoden löser de flesta uppgifter. Återstående fall är när du behöver programmatisk scroll till botten (chatt), anpassade händelser när man når blockets gränser, eller scroll-animering via knapp. Det är här jQuery kommer in.

Här är ett färdigt plugin, minimalt, inga beroenden förutom jQuery självt, testat på projekt med moderna WordPress-versioner och krockar inte med andra 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);

Var du startar det: ditt skript (separat tema-JS-fil eller <script>-sektion i sidfoten). Inkludera efter 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
});

Vad som händer här: pluginet tar en selektor, applicerar en CSS-höjdbegränsning, scrollar eventuellt blocket till botten och spårar när topp-/bottengränser nås via callbacks. Ingen magi, bara ett omslag över standard jQuery-metoder .css(), .animate() och scroll-händelsen.

Använd den här lösningen när: a) du behöver auto-scrolla chatt till det senaste meddelandet, b) mjuk scroll-animering via extern "Ned"/"Upp"-knapp krävs, c) du behöver koppla analys till händelsen "användare har läst till slutet".

Flera block på en sida

Scenario: tre scroll-block med olika innehåll på sidan. Om du sätter en klass .scroll-block utan unika identifierare fungerar allt, CSS appliceras på alla samtidigt. Men så fort varje block behöver sin egen höjd, välkommen till ID-världen.

CSS för flera block med olika höjder:

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-pluginet, samma logik: initiera varje block separat med sina egna inställningar:

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

Om det finns många block (10+) och alla är identiska räcker en gemensam klass. Om de är olika, ID:n plus individuella inställningar. Ingen magi med nth-child eller manuell iteration, CSS-selektorer hanterar detta direkt.

Styla scrollbaren: så att den inte ser ut som 2007

Webbläsarens standard-scrollbar är en grå rektangel från Windows XP-eran. Två minuters CSS, och den passar din 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
}

Viktigt: ::-webkit-scrollbar-pseudoelement fungerar i Chrome, Edge, Safari och Opera, vilket täcker den stora majoriteten av användare. Firefox använder separata egenskaper scrollbar-width: thin och scrollbar-color, men du kan inte globalt styla scrollbaren i Firefox på elementnivå (endast sidövergripande). För Firefox räcker detta:

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

Överdriv inte scrollbar-bredden: 4-8px är det optimala intervallet. Tunnare än 4px, användare träffar den inte med fingret på mobilen. Tjockare än 8px, scrollbaren börjar dra till sig för mycket uppmärksamhet.

⁉️🤔 Vanliga frågor

Fungerar scroll-blocket på mobila enheter?

Ja, och utan hacks. CSS-egenskapen overflow-y: auto stöds inbyggt av iOS Safari och Chrome för Android. Blockets interna scroll krockar inte med sidans huvudscroll, webbläsaren avgör vilken behållare som ska scrollas baserat på fingerposition. Enda nyansen: på gammal iOS (före 13), lägg till -webkit-overflow-scrolling: touch för tröghetsscroll.

Kan man använda ett scroll-block inuti en Flexbox- eller Grid-behållare?

Det kan du. Scroll-blocket behöver fast höjd, sätt den via max-height i pixlar eller via flex-basis/grid-row med ett absolut värde. Använd inte procentuell höjd inuti ett flex-barn utan explicit höjd på föräldern, webbläsaren kan inte beräkna basen för overflow-beräkning, och scroll kommer inte att visas.

Hur gör man mjuk scroll av blocket till botten utan jQuery?

I ren JavaScript: element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }). Metoden scrollTo med alternativet behavior: 'smooth' stöds av alla moderna webbläsare. För chatt-auto-scroll, anropa denna rad efter att varje nytt meddelande lagts till.

Krockar scroll-blocket med andra skript på sidan?

CSS-lösning, nej. Detta är inbyggda webbläsaregenskaper, de fungerar isolerat. jQuery-pluginet från artikeln använder sin egen namnrymd $.fn.scrollBlock och rör inte globala variabler, så konflikter är uteslutna. Testat på webbplatser med 20+ aktiva plugins, inga problem uppstod.

Kan man animera framträdandet av ett scroll-block?

Ja. Lägg till max-height: 0 och overflow: hidden i initialtillståndet, animera sedan till målhöjden. När animeringen är klar, växla overflow till auto. I jQuery görs detta 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: vad man ska använda 2026

CSS-lösningen täcker den stora majoriteten av scenarier och väger noll kilobyte. Om du bara behöver ett prydligt block med intern scroll, ta den och överkomplicera inte.

jQuery-pluginet är motiverat när: du bygger en chatt med auto-scroll, kopplar analys till scroll-händelser eller animerar scroll via en extern knapp. I andra fall är jQuery-omslaget en överdriven lösning som lägger till ett biblioteksberoende för tre rader CSS.

Testa CSS-varianten nu: kopiera tre rader stilar, slå in testinnehåll i <div class="scroll-block"> och öppna sidan på din telefon. Du ser resultat på en minut, utan npm install, utan bundlers, utan smärta.