Seinakujulised SEO-tekstid, poole ekraani kommentaarid, administraatori logid ja 30 veeruga tabelid lõhuvad küljenduse ja sunnivad lugejaid lõputult kerima. Kõlab tuttavalt? Lahendus on olemas ja see on piinlikult lihtne: fikseeritud kõrguse ja sisemise kerimisega plokk.

Kui ma esimest korda küljendusi ehitama hakkasin, toppisin sisu overflow: hidden sisse ja palvetasin, et keegi äralõigatud teksti ei märkaks. Siis avastasin keritavad plokid ja see muutis kõike: klientide SEO-tekstid muutusid korralikuks, lehed lõpetasid mobiilis paisumise ja naaberskriptid ei läinud enam konflikti.

Allpool on kaks toimivat lähenemist: puhas CSS (enamiku ülesannete jaoks) ja jQuery ümbris (eristsenaariumide jaoks). Mõlemad on lahingus testitud kümnete projektide peal, töötavad korrektselt mobiilseadmetes ega sega naaberskripte.

💡 Kiirülevaade:

• Paki sisu <div> sisse klassidega scroll-block ja scroll-content
• Määra CSS-is max-height + overflow-y: auto, keritav plokk on valmis
• Ühenda artiklist jQuery plugin automaatse kerimise, animatsiooni ja sündmuste jaoks
• Kujunda kerimisriba ::-webkit-scrollbar abil oma saidi disainiga sobivaks

Mis on keritav plokk ja kus seda tegelikult vaja on

Keritav plokk on fikseeritud kõrgusega konteiner, mille sisu kerib seesmiselt, sõltumatult lehe peamisest kerimisest. Brauser lisab kerimisriba automaatselt, kui sisu ületab määratud kõrguse.

Kus ma seda lahendust pidevalt rakendan:

• SEO-tekstid. Klient tahab maandumislehe keskele 3000-sõnalist seinakujulist teksti, mina pakin selle keritavasse plokki, leht ei muutu lõputuks lõuendiks.
• Kommentaarid ja logid. Pikad arutelulõimed või silumislogid administraatori paneelis, fikseeritud kõrgus päästab liidese laialivalgumisest.
• Andmetabelid. Horisontaalne kerimine tabelitele on klassika, kuid vertikaalne kerimine 50+ reaga tabelil lahendab probleemi sama hästi.
• Vestlusvidinad ja teavitused. Vestlusaken sõnumiajalooga, sama keritav plokk, lihtsalt automaatse kerimisega viimase sõnumini.

Tehniliselt tugineb kõik kahele CSS-i atribuudile: max-height (või height) ja overflow-y. Kuid kurat peitub detailides: mobiilibrauserid, pesastatud konteinerid, konfliktid position: fixed-ga ja iOS Safari eripärad nõuavad hoolikat lähenemist.

Vaata seda lühikest õpetust overflow atribuudi kohta, see näitab selgelt kõiki kerimisrežiime ja nende käitumist:

CSS-lahendus: kiire ja ilma JavaScriptita

Valdavaks enamuseks juhtudest pole JavaScripti vaja. Piisab kolmest CSS-i reast:

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

Analüüsime lahti. max-height määrab ülempiiri, plokk ei kasva kõrgemaks kui 320px, kuid võib olla madalam, kui sisu on vähem. overflow-y: auto ütleb brauserile: „näita kerimisriba ainult siis, kui sisu ületab konteineri mahu." Ääris ja polsterdus on valikulised, kuid ilma polsterduseta jääb tekst kerimisriba külge kinni ja näeb odav välja.

HTML jääb semantiliselt puhtaks:

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

See lahendus töötab identselt Chrome'is, Firefoxis, Safaris ja Edge'is, overflow spetsifikatsioon on olnud stabiilne alates CSS2-st ja seda toetavad kõik kaasaegsed brauserid. Mobiilseadmetes ei lähe plokisisene kerimine lehe peamise kerimisega konflikti (erinevalt nutikatest JavaScripti lahendustest 2010ndatest, mis püüdsid touchmove sündmust ja lõhkusid sageli kerimise).

Kuid iOS Safariga on üks nüanss: vaikimisi on plokisisene kerimine „mitteelastne", puudub loomulik kummipaela efekt. Kui vajad sujuvat inertsiaalset kerimist nagu põhisisul, lisa:

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

Atribuut -webkit-overflow-scrolling: touch lubab iOS-is loomuliku hoogkerimise. Märkus: alates iOS 13-st tegi Apple selle overflow: auto puhul vaikekäitumiseks, seega uuemate versioonide puhul on eesliide valikuline. Kuid kui projekt toetab vanu iPade, jäta see alles.

JQuery lahendus: kui vajad täielikku kontrolli

CSS-meetod lahendab enamiku ülesandeid. Ülejäänud juhud on need, kus on vaja programmeeritavat kerimist lõppu (vestlus), kohandatud sündmusi ploki piiride saavutamisel või kerimisanimatsiooni nupu kaudu. Siin tuleb mängu jQuery.

Siin on valmis plugin, minimaalne, ilma sõltuvusteta peale jQuery enda, testitud projektides kaasaegsete WordPressi versioonidega ega lähe konflikti teiste teema skriptidega:

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

Kust seda käivitada: sinu skript (eraldi teema JS-fail või <script> sektsioon jaluses). Lisa pärast jQuery't:

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

Mis siin toimub: plugin võtab selektori, rakendab CSS-i kõrguspiirangu, soovi korral kerib ploki lõppu ja jälgib ülemise/alumise piiri saavutamist tagasikutsete kaudu. Ei mingit maagiat, lihtsalt ümbris standardsete jQuery meetodite .css(), .animate() ja scroll sündmuse ümber.

Kasuta seda lahendust, kui: a) on vaja vestlust automaatselt viimase sõnumini kerida, b) on vaja sujuvat kerimisanimatsiooni välise „Alla"/„Üles" nupu kaudu, c) on vaja analüütika külge haakida sündmus „kasutaja luges lõpuni".

Mitu plokki ühel lehel

Stsenaarium: lehel on kolm erineva sisuga keritavat plokki. Kui määrad ühe klassi .scroll-block ilma unikaalsete identifikaatoriteta, siis kõik töötab, CSS rakendub kõigile korraga. Kuid niipea, kui iga plokk vajab oma kõrgust, tere tulemast ID-de maailma.

CSS mitme erineva kõrgusega ploki jaoks:

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>

jQuery pluginaga sama loogika: initsialiseeri iga plokk eraldi oma seadetega:

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

Kui plokke on palju (10+) ja kõik identsed, piisab ühisest klassist. Kui erinevad, siis ID-d pluss individuaalsed seaded. Ei mingit maagiat nth-child või käsitsi itereerimisega, CSS-selektorid lahendavad selle standardvarustuses.

Kerimisriba kujundamine: et see ei näeks välja nagu aastast 2007

Brauseri vaikimisi kerimisriba on hall ristkülik Windows XP ajastust. Kaks minutit CSS-i ja see sobib sinu disainiga:

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
}

Oluline: ::-webkit-scrollbar pseudoelemendid töötavad Chrome'is, Edge'is, Safaris ja Operas, kattes valdava enamuse kasutajatest. Firefox kasutab eraldi atribuute scrollbar-width: thin ja scrollbar-color, kuid Firefoxis ei saa kerimisriba globaalselt elemendi tasemel kujundada (ainult leheüleselt). Firefoxi jaoks piisab sellest:

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

Ära pinguta kerimisriba laiusega üle: 4-8px on optimaalne vahemik. Peenem kui 4px, kasutajad ei taba seda mobiilis sõrmega. Paksem kui 8px, hakkab kerimisriba liiga palju tähelepanu tõmbama.

⁉️🤔 Korduma kippuvad küsimused

Kas keritav plokk töötab mobiilseadmetes?

Jah, ja ilma häkkideta. CSS-i atribuuti overflow-y: auto toetavad natiivselt iOS Safari ja Chrome Androidile. Ploki sisemine kerimine ei lähe konflikti lehe peamise kerimisega, brauser määrab keritava konteineri sõrme asukoha järgi. Ainus nüanss: vanal iOS-il (enne 13) lisa -webkit-overflow-scrolling: touch hoogkerimise jaoks.

Kas keritavat plokki saab kasutada Flexboxi või Gridi konteineri sees?

Saab. Keritav plokk vajab fikseeritud kõrgust, määra see max-height kaudu pikslites või flex-basis/grid-row kaudu absoluutväärtusega. Ära kasuta protsentuaalset kõrgust flex-lapse sees ilma vanema eksplitsiitse kõrguseta, brauser ei suuda ülevoolu arvutamiseks baasi arvutada ja kerimist ei ilmu.

Kuidas teha ploki sujuvat kerimist lõppu ilma jQueryta?

Puhtas JavaScriptis: element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }). scrollTo meetodit valikuga behavior: 'smooth' toetavad kõik kaasaegsed brauserid. Vestluse automaatseks kerimiseks kutsu seda rida pärast iga uue sõnumi lisamist.

Kas keritav plokk läheb konflikti teiste lehe skriptidega?

CSS-lahendus, ei. Need on brauseri natiivsed atribuudid, nad töötavad isoleeritult. Artikli jQuery plugin kasutab oma nimeruumi $.fn.scrollBlock ega puuduta globaalseid muutujaid, seega on konfliktid välistatud. Testitud saitidel, kus on 20+ aktiivset pluginat, probleeme ei tekkinud.

Kas keritava ploki ilmumist saab animeerida?

Jah. Lisa algolekus max-height: 0 ja overflow: hidden, seejärel animeeri sihtkõrguseni. Kui animatsioon lõpeb, lülita overflow väärtusele auto. jQuery's tehakse seda nii: .animate({ 'max-height': '320px' }, 500, function() { $(this).css('overflow-y', 'auto') }). Puhtas CSS-is transition: max-height 0.5s ease kaudu.

JQuery või CSS: mida kasutada aastal 2026

CSS-lahendus katab valdava enamuse stsenaariume ja kaalub null kilobaiti. Kui vajad lihtsalt korralikku sisemise kerimisega plokki, võta see ja ära tee üleliia keeruliseks.

jQuery plugin on õigustatud, kui: ehitad vestlust automaatse kerimisega, haagid analüütikat kerimissündmuste külge või animeerid kerimist välise nupu kaudu. Muudel juhtudel on jQuery ümbris üleliigne lahendus, mis lisab teegi sõltuvuse kolme CSS-i rea jaoks.

Proovi CSS-i varianti kohe: kopeeri kolm rida stiile, paki testisisu <div class="scroll-block"> sisse ja ava leht oma telefonis. Näed tulemusi minuti pärast, ilma npm installita, ilma bundleriteta, ilma valuta.