CSS-i 'scrollend' sündmused: Arendaja juhend kerimise lõpetamise tuvastamiseks ja haldamiseks

Aastaid on veebiarendajad maadelnud pealtnäha lihtsa küsimusega: "Kas kasutaja on kerimise lõpetanud?" Sellele vastamine on olnud üllatavalt keeruline väljakutse, mis on sageli viinud jõudlusmahukate lahenduste ja ebatäiusliku kasutajakogemuseni. Traditsiooniline scroll sündmus, kuigi kasulik, käivitub kerimisliigutuse ajal lakkamatult, muutes selle halvaks tööriistaks lõpetamise tuvastamiseks. Kuid veebiplatvorm areneb pidevalt ja kohale on jõudnud kaasaegne ja elegantne lahendus: scrollend sündmus.

See põhjalik juhend uurib scrollend sündmust üksikasjalikult. Süveneme ajaloolistesse probleemidesse, mida see lahendab, selle praktilisse rakendamisse, võimsatesse kasutusjuhtudesse ja sellesse, kuidas see sobitub kaasaegsete brauseri API-de laiemasse ökosüsteemi. Olenemata sellest, kas ehitate lõputult keritavat voogu, dünaamilist kasutajaliidest või soovite lihtsalt kirjutada tõhusamat koodi, on scrollend sündmuse mõistmine kaasaegse esirakenduse arenduse jaoks hädavajalik.

Vana väljakutse: Miks oli kerimise lõpetamise tuvastamine nii keeruline

Et mõista scrollend sündmuse tähtsust, peame esmalt aru saama selle eelkäija, scroll sündmuse, piirangutest. scroll sündmus on seotud mis tahes keritava elemendiga (sealhulgas window objektiga) ja käivitub iga kord, kui kerimisasend muutub, isegi ühe piksli võrra.

Kuigi see kõrgsageduslik käivitumine on ideaalne reaalajas efektide, nagu parallaks-taustade või edenemisnäidikute loomiseks, on see jõudluse seisukohast õudusunenägu, kui on vaja tuvastada, millal kerimine on peatunud. Keeruka loogika sidumine otse scroll sündmuse kuulajaga võib põhjustada märkimisväärset hangumist ja reageerimisvõime kaotust, kuna brauseri põhilõim on funktsioonikutsetega üle koormatud.

Klassikaline lahendus: viivitamine (debouncing) `setTimeout`-ga

Aastaid on standardlahenduseks olnud tehnika nimega "debouncing" (viivitamine). Idee on kasutada taimerit (setTimeout), et oodata lühikest tegevusetuse perioodi enne funktsiooni käivitamist. Siin on klassikaline muster:

            
const scrollableElement = document.getElementById('my-scroll-area');
let scrollTimer;

scrollableElement.addEventListener('scroll', () => {
  // Tühjenda eelmine taimer iga kerimissündmuse korral
  clearTimeout(scrollTimer);

  // Määra uus taimer
  scrollTimer = setTimeout(() => {
    // See kood käivitub alles siis, kui kasutaja on kerimise 200ms peatanud
    console.log('Kerimine on tõenäoliselt lõppenud.');
    // ... käivita siin ressursimahukas loogika
  }, 200);
});

            

              
                Copy
              
            
          

See lähenemine, kuigi toimiv, omab mitmeid kriitilisi puudusi:

• Ebausaldusväärsus: Ajalõpu kestus (nt 200 ms) on suvaline oletus. Kui see on liiga lühike, võib funktsioon aeglase kerimise ajal enneaegselt käivituda. Kui see on liiga pikk, tundub kasutajaliides loid ja ei reageeri kasutaja tegevusele. See ei suuda usaldusväärselt arvestada inertse kerimisega (libistamine puuteplaadil või -ekraanil), kus kerimine jätkub ka pärast kasutaja füüsilise interaktsiooni lõppu.
• Jõudluskulu: Isegi viivitamisega käivitub scroll sündmuse kuulaja pidevalt ning clearTimeout/setTimeout tsüklit käivitatakse kerimise ajal kümneid või sadu kordi sekundis. See on raisatud arvutusvõimsus.
• Koodi keerukus: See lisab koodibaasi täiendavat olekut (scrollTimer muutuja) ja standardloogikat, muutes selle lugemise ja hooldamise keerulisemaks.

Veeb vajas natiivset, brauseritasemel lahendust, mis oleks nii usaldusväärne kui ka jõudluselt hea. See lahendus on scrollend.

Tutvustame `scrollend` sündmust: Natiivne lahendus

scrollend sündmus on uus JavaScripti sündmus, mis käivitub, kui kasutaja kerimistoiming on lõppenud. See on loodud olema lõplik, brauseri-natiivne vastus kerimise lõpetamise probleemile. See väldib elegantselt kõiki viivitamise häkkimisega seotud probleeme.

`scrollend` sündmuse peamised eelised

• Jõudlus ennekõike: Erinevalt scroll sündmusest käivitub scrollend ainult üks kord kerimisliigutuse lõppedes. See vähendab dramaatiliselt töötlemiskoormust ja aitab hoida teie veebirakenduse põhilõime vaba, tulemuseks on sujuvamad animatsioonid ja reageerimisvõimelisem kasutajaliides.
• Kõrge usaldusväärsus: Brauseri renderdusmootor määrab, millal kerimine on tõeliselt lõppenud. See on palju täpsem kui lihtne taimer. See käsitleb korrektselt erinevaid kerimistüüpe, sealhulgas hiire ratast, inertse liikumisega puuteplaadi libistamist, klaviatuuriga navigeerimist (nooleklahvid, tühik) ja isegi programmaatilist kerimist.
• Lihtsustatud kood: Rakendamine on puhas, deklaratiivne ja intuitiivne. Lisate lihtsalt sündmusekuulaja scrollend jaoks ja ongi kõik. Ei mingeid taimereid, olekuhaldust ega standardkoodi.

Kuidas kasutada `scrollend` sündmust: Praktiline juhend

scrollend sündmuse kasutamine on märkimisväärselt lihtne. Seote selle keritava elemendiga nagu iga teise sündmuse.

Põhisüntaks

Saate kuulata scrollend sündmust document, window või mis tahes spetsiifilisel elemendil, millel on ülevoolav sisu (st on keritav).

            
// Kuula sündmust konkreetsel keritaval konteineril
const scrollContainer = document.querySelector('.scroll-container');

scrollContainer.addEventListener('scrollend', (event) => {
  console.log('Kerimine on konkreetsel konteineril lõppenud!');
  // Sinu loogika, mis käivitub kerimise lõppedes, läheb siia.
});

// Või kuula sündmust kogu dokumendil
document.addEventListener('scrollend', () => {
  console.log('Kerimine kusagil dokumendis on lõppenud.');
});

            

              
                Copy
              
            
          

Kuulajale edastatav event objekt on standardne Event eksemplar. See ei kanna praegu lisateavet, nagu lõplik kerimisasend, kuid saate neile hõlpsasti juurde pääseda sündmuse sihtmärgist (nt scrollContainer.scrollTop).

Brauseri ühilduvus ja funktsioonide tuvastamine

Kuna scrollend on kaasaegne API, on brauseri ühilduvus globaalsele publikule oluline kaalutlus. 2023. aasta lõpu seisuga toetavad seda Chrome'i, Edge'i ja Firefoxi uusimad versioonid. Siiski on alati oluline kontrollida ajakohaseid ühilduvustabeleid ressurssidest nagu MDN Web Docs või CanIUse.com.

Et tagada koodi toimivus vanemates brauserites, peaksid alati kasutama funktsioonide tuvastamist.

            
const element = document.getElementById('my-element');

if ('onscrollend' in window) {
  // Brauser toetab scrollend sündmust, seega saame seda kasutada
  element.addEventListener('scrollend', () => {
    console.log('Kaasaegne scrollend sündmus käivitus!');
    performActionOnScrollEnd();
  });
} else {
  // Varulahendus vanematele brauseritele, kasutades viivitamise meetodit
  let scrollTimer;
  element.addEventListener('scroll', () => {
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(performActionOnScrollEnd, 150);
  });
}

function performActionOnScrollEnd() {
  // Kogu sinu loogika asub selles funktsioonis
  console.log('Tegevus käivitus pärast kerimise lõpetamist.');
}

            

              
                Copy
              
            
          

See progressiivse täiustamise lähenemine tagab, et kaasaegsete brauseritega kasutajad saavad parima jõudluse, samal ajal kui vanemate brauserite kasutajatel on endiselt toimiv (kuigi vähem optimaalne) kogemus.

Millal `scrollend` käivitub? Päästikute mõistmine

Brauseri mootor on tark selles osas, mis moodustab kerimise "lõpu". scrollend sündmus käivitub, kui:

• Kasutaja vabastab kerimisriba nupu pärast selle lohistamist.
• Kasutaja tõstab sõrme puuteekraanilt pärast kerimist või viipamist ning igasugune sellest tulenev inertne kerimine on täielikult peatunud.
• Kasutaja vabastab klahvi, mis algatas kerimise (nt nooleklahvid, Page Up/Down, Home, End, tühik).
• Programmaatiline kerimine, näiteks element.scrollTo() või element.scrollIntoView() poolt algatatud, on lõpule viidud.

Oluline on märkida, et sündmus ei käivitu, kui kerimisliigutus ei toonud kaasa muutust kerimisasendis. Lisaks, kui uus kerimistoiming algab enne, kui eelmine on oma inertsi täielikult lõpetanud, tühistatakse esialgne scrollend sündmus ja uus käivitub alles siis, kui järgnev kerimistoiming on lõppenud. See käitumine on täpselt see, mida arendajad vajavad usaldusväärseks lõpetamise tuvastamiseks.

Praktilised kasutusjuhud ja globaalsed näited

scrollend sündmuse tegelik võimsus selgub, kui rakendate seda levinud veebiarenduse väljakutsetele. Siin on mitu praktilist kasutusjuhtu, mis on kasulikud publikule üle maailma.

1. Jõudsad kasutajaliidese uuendused

Paljud liidesed peidavad või näitavad elemente vastavalt kerimisasendile. Levinud näide on "Tagasi üles" nupp või kleepuv päis, mis muudab oma välimust.

Vana viis (`scroll`-iga): Kontrolli scrollTop väärtust iga kerimissündmuse korral, mis võib põhjustada hangumist (jank). Uus viis (`scrollend`-iga): Oota, kuni kasutaja lõpetab kerimise, seejärel kontrolli kerimisasendit üks kord ja uuenda kasutajaliidest. See tundub palju sujuvam ja on oluliselt tõhusam.

            
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scrollend', () => {
  if (window.scrollY > 400) {
    backToTopButton.classList.add('visible');
  } else {
    backToTopButton.classList.remove('visible');
  }
});

            

              
                Copy
              
            
          

2. Analüütika ja kasutajakäitumise jälgimine

Kujutage ette, et soovite teada, milline pika tootelehe osa kasutajatele kõige rohkem huvi pakub. Selle asemel, et käivitada analüütikasündmus iga kord, kui jaotis vaatevälja keritakse (mis võib olla müra tekitav), saate selle käivitada, kui kasutaja peatub selles jaotises kerimise. See annab palju tugevama signaali kasutaja kavatsusest.

            
const pricingSection = document.getElementById('pricing');

document.addEventListener('scrollend', () => {
  const rect = pricingSection.getBoundingClientRect();
  // Kontrolli, kas hinnakirja jaotis on kerimise lõppedes suures osas vaateväljas
  if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
    // Saada analüütikasündmus ainult siis, kui kasutaja peatub selles jaotises
    trackEvent('user_paused_on_pricing');
  }
});

            

              
                Copy
              
            
          

3. Sisu laisklaadimine või andmete pärimine

Lõputu kerimisega voogude puhul laadite tavaliselt rohkem sisu, kui kasutaja jõuab lehe lõppu. scrollend sündmuse kasutamine takistab mitme andmepäringu käivitamist, kui kasutaja kerib päästikpunkti ümber kiiresti üles ja alla.

            
const feed = document.querySelector('.infinite-feed');

feed.addEventListener('scrollend', () => {
  // Kontrolli, kas kasutaja on keritava ala alumise osa lähedal
  if (feed.scrollTop + feed.clientHeight >= feed.scrollHeight - 100) {
    loadMoreContent();
  }
});

            

              
                Copy
              
            
          

4. Kasutajaliidese elementide sünkroniseerimine

Mõelge keerulisele andmetabelile või finantsjuhtpaneelile, millel on mitu horisontaalselt keritavat paneeli, mis peavad sünkroonis püsima. scrollend sündmusega saate teiste paneelide asukohta uuendada alles pärast seda, kui kasutaja on ühega neist suhtlemise lõpetanud, vältides hakkivaid, sünkroonist väljas liikumisi kerimise enda ajal.

5. URL-i räsi uuendamine ühelehelistes rakendustes (SPA)

Pikal sihtlehel, kus on jaotistepõhine navigeerimine (nt Teave, Funktsioonid, Kontakt), on tavaline uuendada URL-i räsi (nt example.com#features), kui kasutaja kerib. scroll sündmuse kasutamine võib brauseri ajalugu risustada. scrollend sündmusega saate oodata, kuni kasutaja uude jaotisse jõuab, enne kui uuendate URL-i puhtalt ühe korra.

`scrollend` sündmuse võrdlus teiste Intersection ja Scroll API-dega

Veebiplatvorm pakub rikkalikku tööriistakomplekti kerimisega seotud interaktsioonide haldamiseks. On oluline teada, millist tööriista millise ülesande jaoks kasutada.

• scroll sündmus: Kasutage seda efektide jaoks, mis peavad olema reaalajas täiuslikult sünkroniseeritud kerimisasendiga, näiteks parallaks-animatsioonid või kerimise edenemisribad. Olge teadlik jõudlusest ja piirake või viivitage tugevalt mis tahes keerukat loogikat.
• scrollend sündmus: Kasutage seda alati, kui peate käivitama toimingu pärast kerimisliigutuse lõppemist. See on ideaalne valik kasutajaliidese uuendusteks, andmete pärimiseks ja analüütikaks, mis ei pea toimuma reaalajas.
• Intersection Observer API: See API on väga jõudne tuvastamaks, millal element siseneb vaatevälja või lahkub sealt (või mõnest teisest elemendist). See vastab küsimusele: "Kas see element on praegu nähtav?" See sobib ideaalselt piltide laisklaadimiseks, animatsioonide käivitamiseks elementide ilmumisel või videote peatamiseks, kui need on ekraanilt väljas. See töötab kaunilt koos scrollend sündmusega. Näiteks võiksite kasutada `Intersection Observer`it, et teada saada, millal analüütikaga jälgitav jaotis on nähtav, ja seejärel kasutada scrollend sündmust, et kinnitada, et kasutaja on sinna tegelikult peatunud.
• CSS-i kerimispõhised animatsioonid: See on uuem, puhtalt CSS-il põhinev mehhanism animatsioonide loomiseks, mis on otseselt seotud kerimise edenemisega. See viib animatsioonitöö põhilõimelt täielikult ära, muutes selle kõige jõudsamaks valikuks kerimisega seotud visuaalsete efektide jaoks. See on deklaratiivne ja ei hõlma JavaScripti.

Põhilised järeldused ja parimad tavad

Kokkuvõtteks on siin toodud kaasaegse veebiarenduse kerimise lõpetamise käsitlemise olulisemad parimad tavad:

1. Eelistage scrollend sündmust lõpetamisloogika jaoks: Iga ülesande jaoks, mis peab käivituma pärast seda, kui kasutaja on kerimise lõpetanud, peaks scrollend olema teie vaikimisi valik.
2. Kasutage funktsioonide tuvastamist töökindluse tagamiseks: Kontrollige alati brauseri tuge ja pakkuge varulahendus (nagu klassikaline viivitamise meetod), et tagada teie rakenduse toimimine kõigile kasutajatele üle maailma.
3. Kombineerige API-sid võimsate lahenduste loomiseks: Ärge mõelge neist API-dest eraldi. Kasutage Intersection Observerit nähtavuse tuvastamiseks ja scrollend sündmust kasutaja kavatsuse (peatumise) tuvastamiseks, luues keerukaid ja jõudsaid kasutajakogemusi.
4. Reserveerige scroll sündmus reaalajas efektide jaoks: Kasutage töötlemata scroll sündmust ainult siis, kui see on absoluutselt vajalik animatsioonide jaoks, mis peavad olema tihedalt seotud kerimisasendiga, ja olge alati teadlik jõudlusmõjudest.

Kokkuvõte: Uus ajastu kerimise haldamisel

scrollend sündmuse kasutuselevõtt tähistab olulist sammu edasi veebiplatvormi arengus. See asendab hapra ja ebatõhusa lahenduse tugeva, jõudsa ja lihtsalt kasutatava natiivse brauseri funktsiooniga. Mõistes ja rakendades scrollend sündmust, saavad arendajad kirjutada puhtamat koodi, ehitada kiiremaid rakendusi ning luua intuitiivsemaid ja sujuvamaid kasutajakogemusi mitmekesisele globaalsele publikule. Järgmise projekti ehitamisel otsige võimalusi oma vanade viivitatud kerimiskuulajate asendamiseks ja võtke omaks scrollend sündmuse kaasaegne ja tõhus maailm.