Elementen die rekening houden met de scrollpositie

Webfuncties: Query's voor container-scrollstatus

Overzicht

Verbeter de gebruikerservaring van zwevende knoppen, zoals een link Terug naar boven, door ze alleen te tonen als ze nuttig zijn. In deze handleiding wordt uitgelegd hoe je deze elementen maakt met CSS container-scroll-state-queries. Hiermee kun je elementen opmaken op basis van de scrollpositie van de container zonder dat je JavaScript-scroll-listeners of -observers nodig hebt.

Implementatie

1. De scrollcontainer instellen

De scrollcontainer moet worden gedefinieerd als een scrollstatusquery-container.

.scroller {
  overflow-y: auto;
  /* Establish this element as a scroll-state query container */
  container-type: scroll-state;
}

2. Het zwevende element opmaken

Plaats het element in de container en maak het op. Standaard is deze verborgen.

.back-to-top {
  position: sticky;
  bottom: 20px;
  visibility: hidden;
  opacity: 0;
  translate: 0 20px;
  transition:
    visibility 0.3s,
    opacity 0.3s ease,
    translate 0.3s ease;
}

3. Reageren op de scrollstatus

Gebruik de regel @container met de functie scroll-state. Als je wilt checken of de gebruiker naar beneden heeft gescrold, check je of de container naar boven kan worden gescrold.

/* When the container can be scrolled toward the top, it means the user has scrolled down */
@container scroll-state(scrollable: top) {
  .back-to-top {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
  }
}

Reservestrategieën

Basisreserve

Als container-scroll-state-queries niet wordt ondersteund, blijft het zwevende element onzichtbaar vanwege de standaard visibility: hidden. U kunt ervoor kiezen het element altijd zichtbaar te maken in niet-ondersteunde browsers om de functionaliteit te garanderen.

/* Fallback for browsers that do not support the feature */
.back-to-top {
  visibility: visible; /* Always visible */
  opacity: 1;
}

/* Override for supported browsers to handle dynamic visibility */
@supports (container-type: scroll-state) {
  .back-to-top {
    visibility: hidden;
    opacity: 0;
  }
  
  @container scroll-state(scrollable: top) {
    .back-to-top {
      visibility: visible;
      opacity: 1;
      translate: 0 0;
    }
  }
}

Geavanceerde reserve (Intersection Observer)

Als dynamische zichtbaarheid is vereist, gebruikt u een IntersectionObserver om een klasse aan of uit te zetten wanneer een sentinel-element bovenaan de scroller uit beeld verdwijnt.

<!-- Sentinel element placed at the top of the scroller -->
<div class="scroll-sentinel"></div>

/* Marker styling to ensure it does not affect layout */
.scroll-sentinel {
  height: 0;
  width: 0;
  visibility: hidden;
}

.scrolled .back-to-top {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
}

if (!CSS.supports('container-type', 'scroll-state')) {
  const sentinel = document.querySelector('.scroll-sentinel');
  const scroller = document.querySelector('.scroller');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // If the sentinel is NOT intersecting, it means the user has scrolled down
      if (!entry.isIntersecting) {
        scroller.classList.add('scrolled');
      } else {
        scroller.classList.remove('scrolled');
      }
    });
  }, { root: scroller });

  observer.observe(sentinel);
}