Does angular support body scrolling?

Rulningskontrol i Angular: En Dybdegående Guide

16/11/2023

★★★★★Rating: 4.36 (10196 votes)

I den moderne webudvikling er brugervenlighed altafgørende, og en ofte overset, men kritisk, komponent er håndteringen af rulning. Når vi interagerer med komplekse enkelt-side applikationer (SPA'er) som dem, der er bygget med Angular, kan den måde, siden reagerer på, når vi ruller, skifte side eller åbner nye elementer, have en enorm indflydelse på brugeroplevelsen. Denne artikel vil udforske de forskellige aspekter af rulningskontrol i Angular, fra at forhindre uønsket kropsrulning ved visning af pop-up-vinduer til at håndtere den komplekse interaktion mellem Angular Router og sidens rulningsposition. Vi vil dykke ned i praktiske løsninger og avancerede teknikker, der sikrer en flydende og intuitiv oplevelse for dine brugere.

Does angular support body scrolling?
As such, there are cases when it makes sense to provide an Angular service that specifically deals with the window / body scrolling functionality. For example, if I route to a Modal window, it would be nice to disable and then re-enable body scrolling when the modal window is opened and closed, respectively.
Indholdsfortegnelse

Forståelse af Rulning i Webapplikationer

Traditionelle server-renderede websteder håndterer rulning ud af boksen med browserens indbyggede funktioner. Klikker du på et ankerlink (f.eks. /side#sektion), ruller browseren automatisk til den pågældende sektion. Trykker du på tilbage-knappen, husker browseren typisk din forrige rulningsposition. Denne intuitive adfærd er en hjørnesten i webnavigation. Men i SPA'er, hvor indhold dynamisk indlæses og udskiftes uden fulde sidegenindlæsninger, kan denne standardadfærd forstyrres. JavaScript overtager en stor del af kontrollen, hvilket kan føre til uventet rulning eller mangel på samme, hvis det ikke håndteres korrekt. Derfor er det essentielt at forstå, hvordan Angular interagerer med DOM'en og browserens rulningsmekanismer.

Forhindring af Kropsrulning: Når Modalvinduer Tager Rampelyset

Et af de mest almindelige scenarier, hvor man ønsker at kontrollere rulning, er ved visning af modalvinduer (pop-up-vinduer) eller sidebjælker. Når et modalvindue åbnes, er det ofte ønskeligt, at den underliggende side forbliver statisk og ikke kan rulles. Dette forhindrer, at brugeren ved et uheld ruller den skjulte baggrund, mens de interagerer med modalvinduet. Dette bidrager markant til en forbedret brugervenlighed og fokus. Selvom det kan virke som et simpelt problem, er <body>-elementet uden for Angular-applikationens typiske grænser, hvilket kræver en specifik tilgang.

En elegant løsning, som er blevet brugt og populariseret i mange sammenhænge, involverer manipulation af <body>-elementets CSS-egenskab overflow. Ved at sætte overflow: hidden !important; på <body> kan man effektivt deaktivere rulning. Når modalvinduet lukkes, fjernes denne stil, og rulningen genaktiveres. Den udfordrende del er at implementere dette på en ren og genanvendelig måde inden for en Angular-applikation.

Ben Nadels WindowScrolling-tjeneste

En smart måde at indkapsle denne funktionalitet på er via en dedikeret Angular-tjeneste. Ben Nadel foreslog en WindowScrolling-tjeneste, der eksponerer simple enable() og disable() metoder. Denne tjeneste håndterer selv injektion og fjernelse af et <style>-tag direkte i DOM'en, som indeholder den nødvendige CSS for at skjule rulningslinjen på <body>-elementet.

Logikken bag disable()-metoden er at tilføje et dynamisk oprettet <style>-element til document.body. Dette style-element indeholder CSS-reglen body { overflow: hidden !important; }. Den !important-deklaration sikrer, at denne stil overskriver eventuelle andre overflow-definitioner, der måtte være til stede. Når enable()-metoden kaldes, fjernes det samme style-element fra DOM'en, og <body> genoptager sin normale rulningsadfærd.

En vigtig overvejelse her er, at tjenesten direkte refererer til det globale document-objekt. I Angular-verdenen foretrækkes det ofte at bruge Renderer2-tjenesten for DOM-manipulation for at bevare applikationens miljøuafhængighed (f.eks. til server-side rendering). Men som kildematerialet indikerer, kan Renderer2 ikke injiceres direkte i en Angular-tjeneste, kun i direktiver eller komponenter. Derfor er direkte adgang til document i dette specifikke scenarie en pragmatisk og accepteret løsning, der holder funktionaliteten indkapslet i en genanvendelig tjeneste. Denne tilgang sikrer, at dine komponenter forbliver rene og kun kalder enable() eller disable() efter behov, typisk når et modalvinduer åbnes eller lukkes.

Angular Router og Rulningskontrol: En Kompleks Relation

Udover at forhindre kropsrulning handler en anden central udfordring om, hvordan Angular Router håndterer rulningspositioner under navigation. Angulars RouterModule tilbyder konfigurationsmuligheder, der forsøger at genskabe browserens standardadfærd, men med nogle nuancer, der kan være frustrerende for udviklere.

I din AppRoutingModule kan du konfigurere routeren med indstillinger som:

  • scrollPositionRestoration: 'enabled': Denne indstilling forsøger at genoprette den tidligere rulningsposition, når brugeren navigerer tilbage eller frem. For "fremadgående" navigationer (nye sider) vil den dog altid rulle til toppen af siden ([0, 0]).
  • anchorScrolling: 'enabled': Hvis din URL indeholder et anker (f.eks. #sektion), vil denne indstilling få routeren til at rulle til det tilsvarende element på siden.

Disse indstillinger er nyttige for standard navigation, men problemer opstår, når du ønsker at opdatere URL'en uden at ændre sidens rulningsposition. Forestil dig en shopping-app, hvor du anvender filtre eller sortering (f.eks. ?filter=sko&order=asc). I dette scenarie ønsker du sandsynligvis bare at opdatere URL'en for at afspejle ændringerne, men holde brugerens visningsposition intakt. Et andet eksempel er at åbne en sidebar eller et mindre modalvindue, som skal have en unik URL til direkte linking (f.eks. ?sidebar=anmeldelser). Hvis routeren scroller til toppen hver gang URL'en opdateres, vil det forstyrre brugerflowet og skabe en dårlig oplevelse.

Den Udfordrende Standardadfærd: Hvorfor Angular Scroller til Toppen

Som nævnt scroller Angulars Router som standard til toppen af siden ved fremadgående navigationer, selv når du kun ændrer query-parametre. En dybere kig på Angulars kernekode (specifikt consumeScrollEvents-metoden i Router-modulet) afslører logikken: medmindre scrollPositionRestoration er sat til 'disabled', vil routeren altid forsøge at rulle til en position. For nye navigationer uden en gemt position eller et anker, er denne position [0, 0] (toppen af siden).

Dette har været et kendt problem i Angular-fællesskabet, med GitHub-issues der går tilbage til 2018, der anmoder om en måde at midlertidigt deaktivere scrollPositionRestoration for specifikke navigationer. Desværre er der ingen indbygget attribut (som f.eks. [scrollPositionRestoration]="false" på et [routerLink]) der giver denne fleksibilitet direkte.

How to use viewportscroller in angular?
So, I tried another way, using Angular's ViewportScroller. In order to do that, you have to inject ViewportScroller at Component's constructor, like constructor(private scroller: ViewportScroller) and just call this.scroller.scrollToAnchor("");.

Avancerede Løsninger: Dynamisk Rulningskontrol

Da en direkte løsning via [routerLink]-attributten ikke er tilgængelig, er udviklere nødt til at ty til mere avancerede workarounds. En effektiv metode, der er blevet brugt, er at udnytte en dynamisk JavaScript getter for scrollPositionRestoration-indstillingen direkte i RouterModule.forRoot-konfigurationen.

I stedet for at sætte scrollPositionRestoration til en statisk streng ('enabled' eller 'disabled'), kan du give den en funktion, der dynamisk bestemmer værdien baseret på den aktuelle URL. For eksempel:

RouterModule.forRoot(routes, { get scrollPositionRestoration() { const params = new URLSearchParams(window.location.search); if (params.get('sidebar')) { return 'disabled' as const; } return 'enabled' as const; }, scrollOffset: [0, 164], anchorScrolling: 'enabled', });

Denne tilgang fungerer ved, at hver gang Angulars Router skal tjekke, om den skal rulle, kalder den denne getter-funktion. Inde i funktionen kan du inspicere den aktuelle URL (f.eks. ved hjælp af URLSearchParams til at læse query-parametre). Hvis en specifik parameter, som indikerer en midlertidig UI-ændring (f.eks. ?sidebar=true), er til stede, returnerer getteren 'disabled', hvilket forhindrer routeren i at rulle til toppen. Ellers returneres 'enabled', og den normale rulningsadfærd opretholdes.

Selvom dette er en elegant workaround, er det vigtigt at anerkende, at det er en tilpasning af kernens routeradfærd og ikke en officielt understøttet per-navigation-indstilling. Det kan potentielt føre til uforudsete sideeffekter i mere komplekse scenarier, men for mange almindelige brugssituationer, som f.eks. filtre eller sidebjælker, løser det problemet effektivt og undgår behovet for grimme URL-hacks eller kompleks manuel rulningshåndtering.

Bedste Praksis og Overvejelser

At mestre rulningskontrol i Angular handler om at afbalancere browserens standardadfærd med de specifikke behov i din SPA. Her er nogle bedste praksis og overvejelser:

  • Forstå Brugerbehov: Tænk altid på, hvad brugeren forventer. Skal siden rulle? Skal den huske positionen?
  • Genanvendelige Tjenester: Indkapsl rulningslogik i tjenester for at holde dine komponenter rene og din kode genanvendelig.
  • Test Grundigt: Rulningsadfærd kan variere mellem browsere og enheder. Test din implementering på tværs af forskellige platforme, især mobile enheder, hvor overflow: hidden muligvis ikke altid fungerer som forventet for alle viewport-scenarier.
  • Ydeevne: Selvom de beskrevne metoder er effektive, skal du altid overveje ydeevnepåvirkningen af DOM-manipulation og komplekse router-gettere i meget store applikationer.
  • HTML Semantik: Selvom vi manipulerer <body>-stilen, skal du altid stræbe efter at bevare semantisk HTML i din applikationsstruktur.

Ofte Stillede Spørgsmål

Hvorfor er kropsrulning et problem med modalvinduer?

Når et modalvindue åbnes, dækker det typisk en del af eller hele den underliggende side. Hvis den underliggende side stadig kan rulles, kan brugeren ved et uheld rulle baggrunden, mens de forsøger at interagere med modalvinduet. Dette skaber en forvirrende og dårlig brugeroplevelse. Ved at deaktivere kropsrulning fokuseres brugerens interaktion udelukkende på modalvinduet.

Kan jeg bruge Renderer2 til at manipulere <body> i en Angular-service?

Nej, Renderer2 kan desværre ikke injiceres direkte i en Angular-service. Den er designet til at blive brugt i komponenter og direktiver. Derfor er direkte adgang til document.body, som vist med WindowScrolling-tjenesten, en nødvendig og accepteret løsning, når DOM-manipulation er påkrævet i en servicekontekst.

Hvad er forskellen mellem scrollPositionRestoration og anchorScrolling i Angular Router?

scrollPositionRestoration handler om at genoprette den generelle rulningsposition på en side, når du navigerer frem og tilbage i browserhistorikken. Hvis sat til 'enabled', husker den din position på den tidligere side. anchorScrolling er specifikt til at rulle til et HTML-element, der er identificeret af et anker (#id) i URL'en.

Hvordan kan jeg opdatere URL'en med query-parametre uden at siden scroller til toppen?

Standardadfærd i Angular Router er at scrolle til toppen ved fremadgående navigationer, selv med ændringer i query-parametre. Den mest effektive workaround er at bruge en dynamisk getter-funktion for scrollPositionRestoration i din RouterModule.forRoot-konfiguration. Denne funktion kan tjekke URL'ens query-parametre og returnere 'disabled', hvis en parameter indikerer, at der ikke skal rulles.

Er den dynamiske scrollPositionRestoration løsning fremtidssikker?

Det er en workaround og ikke en officielt understøttet funktion per navigation. Selvom den er effektiv for mange almindelige scenarier, er der ingen garanti for, at Angulars interne router-logik ikke ændrer sig på måder, der potentielt kan påvirke denne workaround i fremtidige versioner. Det er altid en god idé at holde øje med Angulars udgivelsesnoter og eventuelle nye officielle løsninger på dette problem.

At håndtere rulning i Angular-applikationer er mere end blot en teknisk udfordring; det er en afgørende del af at levere en problemfri og intuitiv brugeroplevelse. Ved at anvende teknikker som WindowScrolling-tjenesten til modalvinduer og den dynamiske router-konfiguration til URL-opdateringer, kan udviklere skabe applikationer, der føles naturlige og responsive. Selvom nogle løsninger kræver et dybere dyk ned i Angulars kerneadfærd, er resultatet en markant forbedret brugervenlighed, der i sidste ende kommer dine brugere til gode. Fortsat læring og eksperimentering med disse teknikker vil hjælpe dig med at mestre kunsten at rulle i Angular.

Hvis du vil læse andre artikler, der ligner Rulningskontrol i Angular: En Dybdegående Guide, kan du besøge kategorien Teknologi.

Go up