Perpindahan Adegan Halus & Nyaman di Semua HP | Cinematic 3D Wedding Invitation

Tantangan & Kebutuhan Pengguna

Pada halaman dengan seluruh lapisan adegan berposisi fixed (inset: 0), scroll bawaan browser tidak dapat diandalkan karena trackpad laptop yang menghasilkan puluhan event wheel beruntun akan langsung melompati banyak adegan sekaligus. Di sisi lain, pada perangkat layar sentuh, lapisan overlay adegan yang berada di z-index tinggi harus mengizinkan sapuan jari (swipe) untuk mengganti adegan, namun tidak boleh membajak ketukan jari ketika pengguna menekan tombol interaktif seperti 'Buka Google Maps' atau 'Lihat Galeri Foto'.

Navigasi berbasis gestur yang baik harus mampu membedakan antara sapuan eksplorasi ruang dan intensi ketukan pada elemen aksi di bawah jari pengguna.

Solusi & Cara Kerja

Komponen SnapScroller mendaftarkan event listener pasif pada window untuk menangani wheel, touchstart, touchmove, touchend, dan keydown. Untuk mencegah lompatan ganda, setiap perpindahan adegan mengaktifkan kunci cooldown (coolRef.current = true) selama 750ms. Saat peristiwa touchstart terjadi, sistem memanggil document.elementFromPoint(clientX, clientY) yang secara cerdas menembus lapisan overlay berproperti pointer-events: none dan menemukan elemen aktual yang disentuh jari. Jika elemen tersebut merupakan bagian dari selector interaktif (a, button, [role='button']), maka flag startedOnInteractive diaktifkan untuk membatalkan pemicuan swipe.

Berikut adalah implementasi deteksi gestur sentuh, rasio arah swipe, dan pemeriksaan elemen interaktif dari file app/page.tsx:

Detail & Hal yang Diperhatikan

Filter Vektor Kemiringan Swipe: Syarat dy > 70 && dy > dx * 2 memastikan hanya sapuan vertikal yang cukup panjang dan tidak miring (bukan gerakan diagonal acak) yang dianggap sebagai perintah pindah adegan.
Manajemen Pointer-Events Dinamis: Komponen pembungkus Ov menerapkan pointer-events: none secara default agar tidak menghalangi area sentuh, dan hanya mengubahnya menjadi auto pada adegan yang memiliki tombol saat adegan tersebut aktif (show === true).
Sinkronisasi Kontainer Scroll Bayangan: Terdapat kontainer scroll tersembunyi (visibility: hidden) berisi 8 blok setinggi 100dvh untuk menjaga nilai scrollTop tetap sinkron saat pengguna melompat antar-adegan menggunakan indikator titik (DotNav).

Tantangan & Kebutuhan Pengguna

Navigasi berbasis gestur yang baik harus mampu membedakan antara sapuan eksplorasi ruang dan intensi ketukan pada elemen aksi di bawah jari pengguna.

Solusi & Cara Kerja

Berikut adalah implementasi deteksi gestur sentuh, rasio arah swipe, dan pemeriksaan elemen interaktif dari file app/page.tsx:

Detail & Hal yang Diperhatikan

Filter Vektor Kemiringan Swipe: Syarat dy > 70 && dy > dx * 2 memastikan hanya sapuan vertikal yang cukup panjang dan tidak miring (bukan gerakan diagonal acak) yang dianggap sebagai perintah pindah adegan.
Manajemen Pointer-Events Dinamis: Komponen pembungkus Ov menerapkan pointer-events: none secara default agar tidak menghalangi area sentuh, dan hanya mengubahnya menjadi auto pada adegan yang memiliki tombol saat adegan tersebut aktif (show === true).
Sinkronisasi Kontainer Scroll Bayangan: Terdapat kontainer scroll tersembunyi (visibility: hidden) berisi 8 blok setinggi 100dvh untuk menjaga nilai scrollTop tetap sinkron saat pengguna melompat antar-adegan menggunakan indikator titik (DotNav).