Deze pagina is vertaald door de Cloud Translation API.

CSS-scrollstatus(),CSS-scrollstatus()

Zoals containerquery's; maar voor vastgelopen, afgebroken en overvolle zoekopdrachten.

Adam Argyle

Gepubliceerd: 15 januari 2025

Chrome 133 bouwt voort op containerquery's door containerquery's met scrollstatus te introduceren. De door de browser beheerde status voor sticky positionering, scroll-snappunten en scrollbare elementen kunnen nu worden opgevraagd en aangepast vanuit CSS.

Overzicht

Voordat u op zoek gaat naar de status van de scroll, moet u JavaScript gebruiken om te begrijpen of een element vastzit, is vastgelopen of kan worden gescrolld. Nu is er een beter presterende methode op het standaardspoor om deze informatie te kennen en dienovereenkomstig aan te passen. Er is ook een nieuwe manier om animaties te activeren, waarbij door scrollen geactiveerde animaties van CSS worden ontgrendeld.

Hier is een overzicht van de statusquery's die beschikbaar zijn in Chrome 133:

Staat vast :: Triggerstijlveranderingen wanneer een element aan een rand vastzit.
Gesnapte staat :: Triggerstijl verandert wanneer een element op een as wordt vastgezet.
Scrollbare staat :: Triggerstijl verandert wanneer een element overloopt.

Het goede nieuws is dat alles wat u van containerquery's heeft geleerd, u zal helpen bij het werken met scrollstatusquery's.

Er is ook onbekend terrein tussen scrollgestuurde animaties en scrollstatuscontainerquery's; we moeten experimenteren met de timing en context om erachter te komen of een scroll-gestuurde animatie of een scroll-getriggerde scroll-state-animatie het beste zal zijn. De volgende video en demo illustreren de hachelijke situatie; een sticky-getriggerde animatie vergeleken met een scroll-gestuurde animatie.

(links) door scroll-state() geactiveerde animatie, (rechts) door scrollen aangedreven animatie
https://codepen.io/web-dot-dev/pen/emOrBaV

Eerste vraag over de scrollstatus

De eerste stap is het definiëren van de container, met behulp van een nieuwe waarde voor de eigenschap container-type . Net als bij een containerquery is het element dat u wilt bevragen het element dat u het container-type en optioneel een container-name geeft. Met scroll-statusquery's geeft u het element op dat vastloopt, vastzit of container-type: scroll-state .

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;
}

De tweede stap is het selecteren van het onderliggende element van die container dat op de status zal reageren, omdat dit bij containerquery's niet hetzelfde element kan zijn waarop het container-type staat.

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

De derde stap is om het uit te proberen. In het volgende CSS-voorbeeld wordt de achtergrond rood vormgegeven wanneer het .stuck-top element bovenaan blijft hangen op 0 . Met een paar extra regels voor de CSS die we al hadden geschreven en een extra bevattend element dat de browserstatus proxy's, gaan onze componenten veel slimmer om met hun omgeving.

https://codepen.io/web-dot-dev/pen/ByBxpwR

Progressieve verbetering

Met de @supports at-regel en nesting kunt u progressieve verbeteringen of voorwaardelijk functiegebruik toevoegen in slechts een paar extra regels code:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

Vergeet ook niet om @media (prefers-reduced-motion: no-preference) {} rond uw beweging te gebruiken, als u uiteindelijk elementen op de pagina animeert met vragen over de scrollstatus.

Gebruiksscenario's

Vast

Misschien moet deze sectie "plakkerige situaties" worden genoemd? Dit is een kleine verzameling gebruiksscenario's voor sticky state, plus een bonusgedeelte met ideeën die moeten worden gebouwd.

@container scroll-state(stuck: top) {}
@container scroll-state(stuck: bottom) {}

Volledige syntaxislijst

Voeg een schaduw toe als je vastzit

Een van de meest voorkomende gebruiksscenario's voor een vastgelopen zoekopdracht is voor navigatiebalken die box-shadow willen toevoegen wanneer ze vastlopen, zodat het lijkt alsof ze zweven over de inhoud die ze overlappen.

https://codepen.io/web-dot-dev/pen/GgKdryj

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}

Activeer de huidige vastzittende header

Een ander veelvoorkomend scenario voor sticky UI-feedback is het benadrukken van het momenteel vastzittende element. In een lijst met alfabetische bands kan dit super nuttig en ondersteunend zijn voor de ervaring.

https://codepen.io/web-dot-dev/pen/pvzVRaK

.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}

Hier is nog een variant, waarbij de kopteksten aan de zijkant van de lijstitems staan. Veel mogelijkheden!

https://codepen.io/web-dot-dev/pen/azoGpGg

Overstroming van ideeën

Hier is een lijst met plakkerige demo's die u kunnen inspireren om wat pit aan de demo toe te voegen, of hun JavaScript te verwijderen, met vragen over de scrollstatus. Ik raad aan om er een te bouwen die je leuk vindt, het zal de syntaxis en ideeën helpen behouden 😏.

https://codepen.io/BlogFire/pen/PoGMjaX - sticky sticky notes-variant
https://codepen.io/mikegolus/pen/jOZzRzw - voeg schaduwen toe aan een tafel wanneer ze blijven plakken
https://codepen.io/MarcRay/pen/PomBeP - onder de kop verschijnt de navigatiebalk bij activering
https://codepen.io/kevinpowell/pen/OqKJjK - voettekst navigatiebalk onthullen
https://codepen.io/abhisekz-the-decoder/pen/eKaLRd - plakkaartheaders
https://codepen.io/tutsplus/pen/abojPjP - schaduw van prijskoptekst bij trigger
https://codepen.io/kevinpowell/pen/KEjMEv - zijbalktitels voor sticky secties

Geknapt

Met snapped state queries kunnen we een deel van de verantwoordelijkheid wegnemen van JavaScript en Snap Events en de afhandeling verplaatsen naar CSS.

@container scroll-state(snapped: x) {}
@container scroll-state(snapped: y) {}
@container scroll-state(snapped: inline) {}
@container scroll-state(snapped: block) {}

Volledige syntaxislijst

Een kleine herinnering: voor het geval u de sectie Eerste scroll-state query hebt overgeslagen, is de container voor een snap-query het element met scroll-snap-align erop, en het element dat zich kan aanpassen moet een onderliggend element van dat element zijn. Dit betekent dat er drie elementen nodig zijn om dit in te stellen:

a scroll container with `scroll-snap-type`
⤷ a snap target with both `scroll-snap-align` and `container-type: scroll-state`
    ⤷ a child of the snap target that can query the container for snap state

Geef het kapotte item een visuele boost

Het is heel gebruikelijk bij een in het midden vastgeklikte scroller om het in het midden vastgeklikte item te markeren of uit te lichten. In dit voorbeeld van testimonials wordt het trefwoord not gebruikt, zodat alle niet-geselecteerde getuigenissen een lage dekking hebben, terwijl de gesnapte getuigenissen in hun natuurlijke presentatiestatus blijven.

https://codepen.io/web-dot-dev/pen/NPKMdBX

.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}

Toon het bijschrift voor het vastgelegde item

Dit is een goed voorbeeld van hoe scrollstatusquery's door scrollen geactiveerde animatie mogelijk maken. Het is ook een goed voorbeeld van wanneer het respecteren van verminderde beweging waardevol is in de CSS.

https://codepen.io/web-dot-dev/pen/XJrqpBG

.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

Animeren in dia-elementen

Het is heel gebruikelijk om tijdens het geven van een lezing elementen van een diavoorstelling of presentatie te animeren. Vroeger was het behoorlijk vervelend om hiervoor een kruisingswaarnemer te schrijven, die alleen maar een klasse op de dia zette. Nu hebben we geen JavaScript nodig.

https://codepen.io/web-dot-dev/pen/dPbeNqY

html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

Het zal je misschien opvallen dat alle afgebroken CSS-statusquery's zich gedragen als scrollsnapchanging , in tegenstelling tot scrollsnapchange . Dit geeft u de vroegst mogelijke hook voor het geven van visuele feedback van het vastgeklikte element. Als het te gretig is, overweeg dan de JavaScript-gebeurtenis.

Scrollbaar

De scrollbare statusquery zal zeer nuttig zijn bij het tonen van visuele mogelijkheden voor wanneer een scrollgebied daadwerkelijk kan worden gescrolld. Totdat de statusquery's werden gescrolld, was dit lastige informatie om te weten .

@container scroll-state(scrollable: top) {}
@container scroll-state(scrollable: right) {}
@container scroll-state(scrollable: bottom) {}
@container scroll-state(scrollable: left) {}

Volledige syntaxislijst

Geef scroll aan met schaduwen

Er is een beroemde CSS-truc van Lea Verou die background-attachment: local om een vergelijkbaar effect te bereiken, evenals een manier om dit te doen met scrollgestuurde animatie . Elke techniek heeft nadelen. Het is aan ons om te onderzoeken wanneer en waar elk van deze technieken het meest geschikt is.

In het volgende voorbeeld wordt een enkel plakkerig element gebruikt dat de scrollport omspant. Bij een verloop bovenaan en een verloop onderaan wordt de dekking geanimeerd met @property wanneer hun contextuele scrollstatusquery van toepassing is: @container scroll-state(scrollable: top) .

Merk ook op dat dit de eerste container is die zowel een size als scroll-state heeft.

https://codepen.io/web-dot-dev/pen/OPLZWBj

.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}

Pijl-prompt

Soms kan het tonen van een pijl gebruikers helpen ontdekken dat een gebied schuifbaar is. Deze wijzen meestal in de richting waarin scrollen kan plaatsvinden, en verdwijnen zodra ze niet meer nodig zijn. Dat kun je doen met de volgende code.

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}

Terug naar boven

Een andere populaire scrollstatus-interactie is de gemaksknop 'scroll naar boven'. De volgende code zorgt ervoor dat de knop 'Scrol naar boven' verdwijnt als je nergens omhoog kunt scrollen.

Deze oplossing is een beetje omgekeerd, maar je kunt er wel de hoeveelheid CSS mee verminderen. De natuurlijke rustplaats van de knop is zichtbaar, dus je moet hem vertellen dat hij zich moet verbergen als hij nergens meer naar boven kan scrollen.

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}

Vervolg studie

Als u op zoek bent naar meer, vindt u hier een paar bronnen die variëren van specificatiedetails tot andere geweldige artikelen over dit onderwerp:

Wat moeten we nog meer in de container kunnen opvragen? https://github.com/w3c/csswg-drafts/issues/5989
scroll-state() uitleg - https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md
scroll-state() CSS-specificatie - https://www.w3.org/TR/css-conditional-5/#scroll-state-container
Lay-out -snapshot maken in HTML-gebeurtenislus
Een podcastaflevering over staatsvragen - https://nerdy.dev/the-css-podcast-on-state-queries
Meer artikelen
- https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css/
- https://ishadeed.com/article/css-state-queries/
- https://csscade.com/can-you-detect-overflow-with-css/
- https://css-tip.com/overflow-detection/ - detecteren met scrollgestuurde animatie op een manier dat meer dan alleen kinderen kunnen weten (met de afweging van bedrog)

Zoals containerquery's; maar voor vastgelopen, afgebroken en overvolle zoekopdrachten.

Adam Argyle

Gepubliceerd: 15 januari 2025

Overzicht

Voordat u vragen kunt stellen over de status van de scroll, moet u JavaScript gebruiken om te begrijpen of een element vastzit, is vastgelopen of kan worden gescrolld. Nu is er een beter presterende methode op het standaardspoor om deze informatie te kennen en dienovereenkomstig aan te passen. Er is ook een nieuwe manier om animaties te activeren, waarbij door scrollen geactiveerde animaties van CSS worden ontgrendeld.

Hier is een overzicht van de statusquery's die beschikbaar zijn in Chrome 133:

Staat vast :: Triggerstijlveranderingen wanneer een element aan een rand vastzit.
Gesnapte staat :: Triggerstijl verandert wanneer een element op een as wordt vastgezet.
Scrollbare staat :: Triggerstijl verandert wanneer een element overloopt.

Het goede nieuws is dat alles wat u van containerquery's heeft geleerd, u zal helpen bij het werken met scrollstatusquery's.

(links) door scroll-state() geactiveerde animatie, (rechts) door scrollen aangedreven animatie
https://codepen.io/web-dot-dev/pen/emOrBaV

Eerste vraag over de scrollstatus

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;
}

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

https://codepen.io/web-dot-dev/pen/ByBxpwR

Progressieve verbetering

Met de @supports at-regel en nesting kunt u progressieve verbeteringen of voorwaardelijk functiegebruik toevoegen in slechts een paar extra regels code:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  @supports (container-type: scroll-state) {
    > nav {
      @container scroll-state(stuck: top) {
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}

Vergeet ook niet om @media (prefers-reduced-motion: no-preference) {} rond uw beweging te gebruiken, als u uiteindelijk elementen op de pagina animeert met vragen over de scrollstatus.

Gebruiksscenario's

Vast

Misschien moet deze sectie "plakkerige situaties" worden genoemd? Dit is een kleine verzameling gebruiksscenario's voor sticky state, plus een bonusgedeelte met ideeën die moeten worden gebouwd.

@container scroll-state(stuck: top) {}
@container scroll-state(stuck: bottom) {}

Volledige syntaxislijst

Voeg een schaduw toe als je vastzit

https://codepen.io/web-dot-dev/pen/GgKdryj

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    transition: box-shadow .3s ease;

    @container scroll-state(stuck: top) {
      box-shadow: var(--shadow-5);
    }
  }
}

Activeer de huidige vastzittende header

https://codepen.io/web-dot-dev/pen/pvzVRaK

.sticky-slide {
  dt {
    container-type: scroll-state;
    position: sticky;
    inset-block-start: 0;
    inset-inline: 0;

    > header {
      transition: 
        background .3s ease,
        box-shadow .5s ease;

      @container scroll-state(stuck: top) {
        background: hsl(265 100% 27%);
        box-shadow: 0 5px 5px #0003;
      }
    }
  }
}

Hier is nog een variant, waarbij de kopteksten aan de zijkant van de lijstitems staan. Veel mogelijkheden!

https://codepen.io/web-dot-dev/pen/azoGpGg

Overstroming van ideeën

https://codepen.io/BlogFire/pen/PoGMjaX - sticky sticky notes-variant
https://codepen.io/mikegolus/pen/jOZzRzw - voeg schaduwen toe aan een tafel wanneer ze blijven plakken
https://codepen.io/MarcRay/pen/PomBeP - onder de kop verschijnt de navigatiebalk bij activering
https://codepen.io/kevinpowell/pen/OqKJjK - voettekst navigatiebalk onthullen
https://codepen.io/abhisekz-the-decoder/pen/eKaLRd - plakkaartheaders
https://codepen.io/tutsplus/pen/abojPjP - schaduw van prijskoptekst bij trigger
https://codepen.io/kevinpowell/pen/KEjMEv - zijbalktitels voor sticky secties

Geknapt

Met snapped state queries kunnen we een deel van de verantwoordelijkheid wegnemen van JavaScript en Snap Events en de afhandeling verplaatsen naar CSS.

@container scroll-state(snapped: x) {}
@container scroll-state(snapped: y) {}
@container scroll-state(snapped: inline) {}
@container scroll-state(snapped: block) {}

Volledige syntaxislijst

a scroll container with `scroll-snap-type`
⤷ a snap target with both `scroll-snap-align` and `container-type: scroll-state`
    ⤷ a child of the snap target that can query the container for snap state

Geef het kapotte item een visuele boost

Het is heel gebruikelijk bij een in het midden vastgeklikte scroller om het in het midden vastgeklikte item te markeren of uit te lichten. In dit voorbeeld van testimonials wordt het sleutelwoord not gebruikt, zodat alle niet-gesplitste getuigenissen een lage dekking hebben, terwijl de gesnapte getuigenissen in hun natuurlijke presentatiestatus blijven.

https://codepen.io/web-dot-dev/pen/NPKMdBX

.demo {
  overflow: auto hidden;
  scroll-snap-type: x mandatory;

  > article {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      > * {
        transition: opacity .5s ease;

        @container not scroll-state(snapped: x) {
          opacity: .25;
        }
      }
    }
  }
}

Toon het bijschrift voor het vastgelegde item

https://codepen.io/web-dot-dev/pen/XJrqpBG

.demo {
  overflow-x: auto;
  scroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  > .card {
    container-type: scroll-state;
    scroll-snap-align: center;

    @supports (container-type: scroll-state) {
      @media (prefers-reduced-motion: no-preference) {
        figcaption {
          transform: translateY(100%);

          @container scroll-state(snapped: x) {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

Animeren in dia-elementen

https://codepen.io/web-dot-dev/pen/dPbeNqY

html {
  scroll-snap-type: y mandatory;
}

section {
  container-type: scroll-state;
  scroll-snap-align: start;
  scroll-snap-stop: always;

  @supports (container-type: scroll-state) {
    @media (prefers-reduced-motion: no-preference) {
      > h1 {
        transition: opacity .5s ease, transform .5s var(--ease-spring-3);
        transition-delay: .5s;
        opacity: 0;
        transform: scale(1.25);

        @container scroll-state(snapped: block) {
          opacity: 1;
          transform: scale(1);
        }
      }
    }
  }
}

Scrollbaar

@container scroll-state(scrollable: top) {}
@container scroll-state(scrollable: right) {}
@container scroll-state(scrollable: bottom) {}
@container scroll-state(scrollable: left) {}

Volledige syntaxislijst

Geef scroll aan met schaduwen

Merk ook op dat dit de eerste container is die zowel een size als scroll-state heeft.

https://codepen.io/web-dot-dev/pen/OPLZWBj

.scroll-container {
  container-type: scroll-state size;
  overflow: auto;

  &::after {
    content: " ";

    background: var(--_shadow-top), var(--_shadow-bottom);
    transition: 
      --_scroll-shadow-color-1-opacity .5s ease,
      --_scroll-shadow-color-2-opacity .5s ease;

    @container scroll-state(scrollable: top) {
      --_scroll-shadow-color-1-opacity: var(--_shadow-color-opacity, 25%);
    }

    @container scroll-state(scrollable: bottom) {
      --_scroll-shadow-color-2-opacity: var(--_shadow-color-opacity, 25%);
    }
  }
}

Pijl-prompt

Soms kan het tonen van een pijl gebruikers helpen ontdekken dat een gebied kan worden gescrolld. Deze wijzen meestal in de richting waarin scrollen kan plaatsvinden, en verdwijnen zodra ze niet meer nodig zijn. Dat kun je doen met de volgende code.

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container scroll-state((scrollable: top) or (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
}

@container scroll-state((scrollable: top) and (not (scrollable: bottom))) {
  translate: 0 calc(100% + 10px);
  rotate: .5turn;
}

Terug naar boven

Een andere populaire scrollstatus-interactie is de gemaksknop 'scroll naar boven'. De volgende code zorgt ervoor dat de knop 'Scrol naar boven' verdwijnt als je nergens omhoog kunt scrollen.

https://codepen.io/web-dot-dev/pen/OPLZWBj

@container not scroll-state(scrollable: top) {
  translate: 0 calc(100% + 10px);
}

Vervolg studie

Als u op zoek bent naar meer, vindt u hier een aantal bronnen die variëren van specificatiedetails tot andere geweldige artikelen over dit onderwerp:

Wat moeten we nog meer in de container kunnen opvragen? https://github.com/w3c/csswg-drafts/issues/5989
scroll-state() uitleg - https://drafts.csswg.org/css-conditional-5/scroll_state_explainer.md
scroll-state() CSS-specificatie - https://www.w3.org/TR/css-conditional-5/#scroll-state-container
Layout -snapshot maken in HTML-gebeurtenislus
Een podcastaflevering over staatsvragen - https://nerdy.dev/the-css-podcast-on-state-queries
Meer artikelen
- https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css/
- https://ishadeed.com/article/css-state-queries/
- https://csscade.com/can-you-detect-overflow-with-css/
- https://css-tip.com/overflow-detection/ - detecteren met scrollgestuurde animatie op een manier dat meer dan alleen kinderen kunnen weten (met de afweging van bedrog)

CSS-scrollstatus(),CSS-scrollstatus()

Overzicht

Eerste vraag over de scrollstatus

Progressieve verbetering

Gebruiksscenario's

Vast

Voeg een schaduw toe als je vastzit

Activeer de huidige vastzittende header

Overstroming van ideeën

Geknapt

Geef het kapotte item een ​​visuele boost

Toon het bijschrift voor het vastgelegde item

Animeren in dia-elementen

Scrollbaar

Geef scroll aan met schaduwen

Pijl-prompt

Terug naar boven

Vervolg studie

Overzicht

Eerste vraag over de scrollstatus

Progressieve verbetering

Gebruiksscenario's

Vast

Voeg een schaduw toe als je vastzit

Activeer de huidige vastzittende header

Overstroming van ideeën

Geknapt

Geef het kapotte item een ​​visuele boost

Toon het bijschrift voor het vastgelegde item

Animeren in dia-elementen

Scrollbaar

Geef scroll aan met schaduwen

Pijl-prompt

Terug naar boven

Vervolg studie

Geef het kapotte item een visuele boost

Geef het kapotte item een visuele boost