Seinäteksti-SEO-blokit, puolet ruudusta peittävät kommentit, ylläpitäjän lokit ja 30 sarakkeen taulukot rikkovat asettelun ja pakottavat lukijat vierittämään loputtomasti. Kuulostaako tutulta? Ratkaisu on olemassa, ja se on nolostuttavan yksinkertainen: kiinteäkorkuinen lohko, jossa on sisäinen vieritys.

Kun aloin rakentaa asetteluja, tungein sisältöä overflow: hidden -määrityksen taakse ja rukoilin, ettei kukaan huomaisi katkennutta tekstiä. Sitten löysin vierityslohkot, ja se muutti kaiken: asiakkaiden SEO-teksteistä tuli siistejä, sivut lakkasivat paisumasta mobiilissa, eivätkä viereiset skriptit enää aiheuttaneet ristiriitoja.

Alla on kaksi toimivaa lähestymistapaa: puhdas CSS (useimpiin tehtäviin) ja jQuery-kääre (räätälöityihin tilanteisiin). Molemmat on taistelutestattu kymmenissä projekteissa, ne toimivat oikein mobiililaitteilla eivätkä häiritse viereisiä skriptejä.

💡 Nopea yleiskatsaus:

• Kääri sisältö <div>-elementtiin, jolla on luokat scroll-block ja scroll-content
• Aseta max-height + overflow-y: auto CSS:ssä, vierityslohko on valmis
• Ota käyttöön artikkelin jQuery-liitännäinen automaattista vieritystä, animaatiota ja tapahtumia varten
• Tyylitä vierityspalkki ::-webkit-scrollbar-valitsimella sivustosi designiin sopivaksi

Mikä on vierityslohko ja missä sitä oikeasti tarvitset

Vierityslohko on säiliö, jolla on kiinteä korkeus ja jonka sisältö vierii itsenäisesti, sivun päävierityksestä riippumatta. Selain lisää vierityspalkin automaattisesti, kun sisältö ylittää asetetun korkeuden.

Missä käytän tätä ratkaisua jatkuvasti:

• SEO-tekstit. Asiakas haluaa 3000 sanan seinätekstin laskeutumissivun keskelle, kääriydyn sen vierityslohkoon, sivu ei muutu loputtomaksi kankaaksi.
• Kommentit ja lokit. Pitkät keskusteluketjut tai virheenkorjauslokit hallintapaneelissa, kiinteä korkeus pelastaa käyttöliittymän leviämiseltä.
• Tietotaulukot. Vaakavieritys taulukoille on klassikko, mutta pystyvieritys taulukossa, jossa on yli 50 riviä, ratkaisee ongelman yhtä hyvin.
• Chat-widgetit ja ilmoitukset. Chat-ikkuna viestihistorialla, sama vierityslohko, vain automaattisella vierityksellä viimeiseen viestiin.

Teknisesti kaikki perustuu kahteen CSS-ominaisuuteen: max-height (tai height) ja overflow-y. Mutta piru piilee yksityiskohdissa: mobiiliselaimet, sisäkkäiset säiliöt, ristiriidat position: fixed -määrityksen kanssa ja iOS Safarin erikoisuudet vaativat huolellista lähestymistapaa.

Katso tämä lyhyt opas overflow-ominaisuudesta, se näyttää selkeästi kaikki vieritystilat ja niiden käyttäytymisen:

CSS-ratkaisu: nopea ja ilman JavaScriptiä

Valtaosassa tapauksista JavaScriptiä ei tarvita. Kolme riviä CSS:ää riittää:

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

Puretaan tämä. max-height asettaa katon, lohko ei kasva 320 pikseliä korkeammaksi, mutta voi olla matalampi, jos sisältöä on vähemmän. overflow-y: auto kertoo selaimelle: "näytä vierityspalkki vain, kun sisältö ylittää säiliön." Reunus ja täyte ovat valinnaisia, mutta ilman täytettä teksti tarttuu vierityspalkkiin ja näyttää halvalta.

HTML pysyy semanttisesti puhtaana:

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

Tämä ratkaisu toimii identtisesti Chromessa, Firefoxissa, Safarissa ja Edgessä, overflow-spesifikaatio on ollut vakaa CSS2:sta lähtien ja kaikki modernit selaimet tukevat sitä. Mobiililaitteilla lohkon sisäinen vieritys ei ole ristiriidassa sivun päävierityksen kanssa (toisin kuin 2010-luvun nokkelat JavaScript-ratkaisut, jotka nappasivat touchmove-tapahtuman ja usein rikkoivat vierityksen).

Mutta iOS Safarissa on vivahde: oletuksena lohkon sisäinen vieritys on "kimmoisaa", luontaista kumilenkkiefektiä ei ole. Jos tarvitset pehmeän inertiaalisen vierityksen kuten pääsisällössä, lisää:

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

Ominaisuus -webkit-overflow-scrolling: touch ottaa käyttöön natiivin liike-energiavierityksen iOS:ssä. Huomio: iOS 13:n myötä Apple teki tästä oletuskäyttäytymisen overflow: auto -määritykselle, joten uudemmissa versioissa etuliite on valinnainen. Mutta jos projekti tukee vanhoja iPadeja, pidä se mukana.

JQuery-ratkaisu: kun tarvitset täyden hallinnan

CSS-menetelmä ratkaisee useimmat tehtävät. Jäljelle jäävät tapaukset ovat sellaisia, joissa tarvitset ohjelmallista vieritystä pohjaan (chat), mukautettuja tapahtumia lohkon rajojen saavuttamisesta tai vieritysanimaatiota painikkeella. Tässä kohtaa jQuery tulee kuvaan.

Tässä on valmis liitännäinen, minimaalinen, ei riippuvuuksia paitsi itse jQuery, testattu projekteissa, joissa on moderneja WordPress-versioita, eikä se ole ristiriidassa muiden teemaskriptien kanssa:

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

Mihin se käynnistetään: oma skriptisi (erillinen teeman JS-tiedosto tai <script>-osio footerissa). Sisällytä jQueryn jälkeen:

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

Mitä tässä tapahtuu: liitännäinen ottaa valitsimen, soveltaa CSS-korkeusrajoitusta, vierittää lohkon valinnaisesti pohjaan ja seuraa ylä-/alarajojen saavuttamista callback-funktioiden avulla. Ei taikuutta, vain kääre tavallisten jQuery-metodien .css(), .animate() ja scroll-tapahtuman ympärille.

Käytä tätä ratkaisua, kun: a) sinun täytyy vierittää chat automaattisesti viimeiseen viestiin, b) tarvitaan pehmeä vieritysanimaatio ulkoisen "Alas"/"Ylös"-painikkeen kautta, c) haluat liittää analytiikan "käyttäjä luki loppuun" -tapahtumaan.

Useita lohkoja yhdellä sivulla

Skenaario: kolme vierityslohkoa eri sisällöillä sivulla. Jos asetat yhden luokan .scroll-block ilman yksilöllisiä tunnisteita, kaikki toimii, CSS soveltuu kaikkiin kerralla. Mutta heti kun jokainen lohko tarvitsee oman korkeutensa, tervetuloa ID:iden maailmaan.

CSS useille lohkoille eri korkeuksilla:

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-liitännäisen kanssa sama logiikka: alusta jokainen lohko erikseen omilla asetuksillaan:

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

Jos lohkoja on monta (yli 10) ja kaikki identtisiä, yhteinen luokka riittää. Jos erilaisia, ID:t plus yksilölliset asetukset. Ei taikuutta nth-child-valitsimella tai manuaalisella iteroinnilla, CSS-valitsimet hoitavat tämän suoraan.

Vierityspalkin tyylittely: jotta se ei näytä vuodelta 2007

Selaimen oletusvierityspalkki on harmaa suorakulmio Windows XP:n aikakaudelta. Kaksi minuuttia CSS:ää, ja se sopii designiisi:

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
}

Tärkeää: ::-webkit-scrollbar-pseudoelementit toimivat Chromessa, Edgessä, Safarissa ja Operassa, kattaen valtaosan käyttäjistä. Firefox käyttää erillisiä ominaisuuksia scrollbar-width: thin ja scrollbar-color, mutta vierityspalkkia ei voi tyylitellä globaalisti Firefoxissa elementtitasolla (vain koko sivun laajuisesti). Firefoxille tämä riittää:

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

Älä liioittele vierityspalkin leveyttä: 4-8 pikseliä on optimaalinen vaihteluväli. Alle 4 pikseliä, käyttäjät eivät osu siihen sormellaan mobiilissa. Yli 8 pikseliä, vierityspalkki alkaa vetää liikaa huomiota.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko vierityslohko mobiililaitteilla?

Kyllä, ja ilman virityksiä. CSS-ominaisuutta overflow-y: auto tukevat natiivisti iOS Safari ja Chrome for Android. Lohkon sisäinen vieritys ei ole ristiriidassa sivun päävierityksen kanssa, selain määrittää vieritettävän säiliön sormen sijainnin perusteella. Ainoa vivahde: vanhalla iOS:llä (ennen versiota 13), lisää -webkit-overflow-scrolling: touch inertiaalista vieritystä varten.

Voiko vierityslohkoa käyttää Flexbox- tai Grid-säiliön sisällä?

Voi. Vierityslohko tarvitsee kiinteän korkeuden, aseta se max-height-määrityksellä pikseleinä tai flex-basis/grid-row-määrityksellä absoluuttisella arvolla. Älä käytä prosentuaalista korkeutta flex-lapsen sisällä ilman eksplisiittistä korkeutta vanhemmalla, selain ei voi laskea perustaa overflow-laskennalle, eikä vieritystä ilmesty.

Miten saan lohkon pehmeän vierityksen pohjaan ilman jQueryä?

Puhtaalla JavaScriptillä: element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' }). scrollTo-metodia behavior: 'smooth' -optiolla tukevat kaikki modernit selaimet. Chatin automaattivierityksessä kutsu tätä riviä jokaisen uuden viestin lisäämisen jälkeen.

Onko vierityslohko ristiriidassa muiden sivun skriptien kanssa?

CSS-ratkaisu, ei. Nämä ovat selaimen natiiveja ominaisuuksia, ne toimivat eristyksissä. Artikkelin jQuery-liitännäinen käyttää omaa nimiavaruuttaan $.fn.scrollBlock eikä koske globaaleihin muuttujiin, joten ristiriidat on suljettu pois. Testattu sivustoilla, joissa on yli 20 aktiivista liitännäistä, ongelmia ei ilmennyt.

Voiko vierityslohkon ilmestymisen animoida?

Voi. Lisää max-height: 0 ja overflow: hidden alkutilassa ja animoi sitten tavoitekorkeuteen. Kun animaatio päättyy, vaihda overflow arvoon auto. jQuerylla tämä tehdään: .animate({ 'max-height': '320px' }, 500, function() { $(this).css('overflow-y', 'auto') }). Puhtaalla CSS:llä, transition: max-height 0.5s ease -määrityksellä.

JQuery vai CSS: mitä käyttää vuonna 2026

CSS-ratkaisu kattaa valtaosan skenaarioista ja painaa nolla kilotavua. Jos tarvitset vain siistin lohkon sisäisellä vierityksellä, ota se äläkä monimutkaista turhaan.

jQuery-liitännäinen on perusteltu, kun: rakennat chattia automaattivierityksellä, liität analytiikkaa vieritystapahtumiin tai animoit vieritystä ulkoisella painikkeella. Muissa tapauksissa jQuery-kääre on liioiteltu ratkaisu, joka lisää kirjastoriippuvuuden kolmelle CSS-riville.

Kokeile CSS-versiota heti: kopioi kolme riviä tyylejä, kääri testisisältö <div class="scroll-block"> -elementtiin ja avaa sivu puhelimellasi. Näet tulokset minuutissa, ilman npm install -komentoa, ilman bundlereita, ilman tuskaa.