Elementos que reconocen la posición de desplazamiento

Funciones web: Consultas de estado de desplazamiento de contenedores

Descripción general

Mejora la experiencia del usuario con los botones flotantes, como el vínculo "Volver arriba", mostrándolos solo cuando sean útiles. En esta guía, se muestra cómo compilar estos elementos con CSS container-scroll-state-queries, que permite aplicar diseño a los elementos según la posición de desplazamiento de su contenedor sin depender de objetos de escucha o de observación de desplazamiento de JavaScript.

Implementación

1. Establece el contenedor de desplazamiento

El contenedor de desplazamiento se debe declarar como un contenedor de consulta de estado de desplazamiento.

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

2. Aplica diseño al elemento flotante

Coloca el elemento dentro del contenedor y dale estilo. De forma predeterminada, debería estar oculto.

.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. Cómo responder al estado de desplazamiento

Usa la regla @container con la función scroll-state. Para comprobar si el usuario se desplazó hacia abajo, verifica si el contenedor se puede desplazar hacia arriba.

/* 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;
  }
}

Estrategias de resguardo

Resguardo básico

Si no se admite container-scroll-state-queries, el elemento flotante permanecerá invisible debido al valor predeterminado visibility: hidden. Para garantizar la funcionalidad, puedes elegir que el elemento siempre esté visible en los navegadores no compatibles.

/* 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;
    }
  }
}

Resguardo avanzado (Intersection Observer)

Si se requiere visibilidad dinámica, usa un IntersectionObserver para activar o desactivar una clase cuando un elemento centinela en la parte superior del desplazador desaparezca de la vista.

<!-- 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);
}