Hints voor scrollbaarheid

Webfuncties: Query's voor container-scrollstatus

Overzicht

Visuele hints, zoals schaduwen of kleurverlopen, helpen gebruikers te begrijpen dat ze kunnen scrollen om meer content te bekijken. In deze handleiding wordt uitgelegd hoe je deze hints maakt met CSS container-scroll-state-queries. Hiermee kun je elementen opmaken op basis van de scrollbare status 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;
  position: relative;
}

2. De indicatoren opmaken

Plaats de indicatorelementen (zoals schaduwen, kleurverlopen of pijlen) in de container en geef ze een stijl. Standaard zijn ze niet zichtbaar. Als ze worden getoond, mogen ze niet interactief zijn. Stel hiervoor pointer-events: none in.

.indicator-top, .indicator-bottom {
  position: sticky;
  left: 0;
  right: 0;
  height: 20px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none; /* Let clicks pass through */
}

.indicator-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent); /* Example: Shadow */
}

.indicator-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent); /* Example: Shadow */
}

3. De scrollstatus opvragen

Gebruik de regel @container met de functie scroll-state. Check of de container omhoog of omlaag kan worden gescrold om de betreffende indicator te tonen.

/* Show top indicator when the user can scroll up */
@container scroll-state(scrollable: top) {
  .indicator-top {
    opacity: 1;
  }
}

/* Show bottom indicator when the user can scroll down */
@container scroll-state(scrollable: bottom) {
  .indicator-bottom {
    opacity: 1;
  }
}

Reservestrategieën

Basisreserve

Als de functie niet wordt ondersteund, blijven de indicatoren onzichtbaar. Omdat dit hints zijn en niet essentieel voor de functionaliteit, is het acceptabel om ze weg te laten in niet-ondersteunde browsers.

Geavanceerde reserve (Intersection Observer)

Als de hints vereist zijn, gebruik je een IntersectionObserver om tussen klassen te schakelen wanneer sentinel-elementen boven- en onderaan de scroller in en uit de scrollport bewegen.

<!-- Sentinel elements placed at the ends of the scroller -->
<div class="sentinel-top"></div>
<!-- Content goes here -->
<div class="sentinel-bottom"></div>

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

.scroller.scrolled-down .indicator-top {
  opacity: 1;
}

.scroller.can-scroll-down .indicator-bottom {
  opacity: 1;
}

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

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.target === topSentinel) {
        // If top sentinel is not intersecting, we have scrolled down
        scroller.classList.toggle('scrolled-down', !entry.isIntersecting);
      }
      if (entry.target === bottomSentinel) {
        // If bottom sentinel is intersecting, we reached the bottom
        scroller.classList.toggle('can-scroll-down', !entry.isIntersecting);
      }
    });
  }, { root: scroller });

  observer.observe(topSentinel);
  observer.observe(bottomSentinel);
}