Elemen yang Memperhatikan Posisi Scroll

Fitur web: Kueri status scroll penampung

Ringkasan

Tingkatkan pengalaman pengguna tombol mengambang, seperti link "Kembali ke Atas", dengan hanya menampilkannya saat berguna. Panduan ini menunjukkan cara membuat elemen ini menggunakan container-scroll-state-queries CSS, yang memungkinkan penataan gaya elemen berdasarkan posisi scroll penampungnya tanpa mengandalkan pemroses atau observer scroll JavaScript.

Penerapan

1. Membuat Penampung Scroll

Penampung scroll harus dideklarasikan sebagai penampung kueri status scroll.

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

2. Menata Gaya Elemen Mengambang

Tempatkan elemen di dalam penampung dan sesuaikan gayanya. Secara default, elemen ini harus disembunyikan.

.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. Merespons Status Scroll

Gunakan aturan @container dengan fungsi scroll-state. Untuk memeriksa apakah pengguna telah men-scroll ke bawah, periksa apakah penampung dapat di-scroll ke atas.

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

Strategi penggantian

Penggantian Dasar

Jika container-scroll-state-queries tidak didukung, elemen mengambang akan tetap tidak terlihat karena visibility: hidden default. Untuk memastikan fungsionalitas, Anda dapat memilih untuk membuat elemen selalu terlihat di browser yang tidak didukung.

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

Penggantian Lanjutan (Intersection Observer)

Jika visibilitas dinamis diperlukan, gunakan IntersectionObserver untuk mengalihkan class saat elemen sentinel di bagian atas scroller tidak terlihat.

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