Memerhatikan perubahan kedudukan elemen HTML menggunakan Intersection Observer

TLDR: Menggunakan Pemerhati Persimpangan untuk memerhatikan perubahan kedudukan unsur tanpa mendengar acara tatal atau pengundian berterusan.

Demo:

https://ajk-essential.github.io/Position-Observer/

Repo Github:

https://github.com/AJK-Essential/Position-Observer

Motivasi:

Secara tradisinya, untuk memerhati apabila elemen bergerak dalam port pandangan, kita perlu bergantung pada mendengar acara tatal elemen induk elemen HTML atau menggunakan kaedah tinjauan berterusan seperti menggunakan kerangka animasi permintaan.

Ini berfungsi…. tetapi boleh menjadi lebih baik…

Memandangkan mendengar acara tatal boleh menyebabkan kelewatan prestasi.
Dan pengundian berterusan sentiasa berjalan di latar belakang... yang mungkin menjadi beban kepada CPU walaupun apabila elemen sasaran tidak bergerak.

Jadi, ini adalah pendekatan / percubaan untuk melihat sama ada kita boleh melakukan sesuatu dengan Intersection Observer untuk memerhati perubahan kedudukan elemen html.

Pendekatan:

Pemerhati Persimpangan sangat pandai melaporkan jika elemen sasaran sebenarnya bersilang dengan elemen akar. Mereka boleh melaporkan perubahan pecahan persilangan antara elemen sasaran dan elemen akar, yang berlaku apabila elemen sasaran bergerak.

Kami juga mempunyai peruntukan untuk menukar dimensi tetingkap tangkapan (sempadan akar) dengan mengubah suai margin rootBounds.

Hmm…

Idea:

Jadi ideanya adalah untuk menggunakan tetingkap penangkapan untuk membungkus sasaran dengan ketat. Ini bermakna apabila elemen sasaran bergerak, ia mencecah dan bersilang dengan tetingkap penangkapan dan dengan itu Pemerhati Persimpangan melaporkan persimpangan minit menggunakan tatasusunan ambang tinggi (dari 0 hingga 1 dalam pembahagian 1/1000ths). Ini bermakna Pemerhati Persimpangan melaporkan setiap 1/1000h perubahan dalam kawasan persimpangan antara sasaran dan akar (tetingkap penangkapan)

Jika ia bergerak keluar dari tetingkap penangkapan sepenuhnya (ini berlaku apabila nisbah persilangan ialah 0), maka kami sekali lagi menukar margin akar (tetingkap penangkapan) untuk berada di sekitar kedudukan sasaran baharu.

Masalah pelaksanaan yang saya hadapi dan cara ia diselesaikan sekarang:

Pendekatan ini berfungsi dengan baik, sehingga saya menghadapi situasi menatal, di mana sasaran berada dalam dimensi port pandangan visual (dalam skrin) tetapi tersembunyi secara visual kerana ia tersembunyi dalam konteks penatalan.

Dalam senario ini, nisbah persimpangan sentiasa 0 kerana persimpangan hanya dilaporkan apabila sasaran berada dalam kawasan visual.

Jadi untuk menyelesaikan perkara ini , pendekatan yang saya ambil ialah ini.

Apabila nisbah persilangan dilaporkan ialah 0…
Pemerhati Persimpangan diputuskan sambungan dan kemudian disambungkan semula dengan tetapan baharu:
 
Dimensi tetingkap penangkapan dibuat sebagai keseluruhan skrin (iaitu dengan margin akar sebagai 0).

Dan panggilan balik untuk senario ini dibuat dalam kaedah lain untuk membezakan antara detik-detik apabila sempadan akar ialah port pandangan visual dan apabila ia hanya di sekitar sasaran.

Jadi apabila Pemerhati Persimpangan kini melaporkan sebarang nisbah persimpangan kurang daripada 1, kami tidak melakukan apa-apa. Untuk setiap laporan, kami katakan terdapat perubahan kedudukan. 

Apabila nisbah bertukar 1, ini bermakna sasaran berada dalam kawasan visual sepenuhnya. Pada masa ini, kami sekali lagi memutuskan sambungan Pemerhati Persimpangan dan menyambung semula dengan tetingkap yang lebih halus di sekeliling sasaran sekali lagi dengan kaedah panggil balik sebelumnya.

Jadi tetingkap penangkapan (rootBounds) akhirnya berkitar antara tetingkap yang lebih halus dan port pandangan visual.

Bagaimana untuk melaksanakannya ? Adakah ini sudah dilaksanakan ?

Ya. Saya telah melaksanakan perkara yang sama seperti kelas PositionObserver dalam repo Github saya (https://github.com/AJK-Essential/Position-Observer) . Fail terletak dalam folder dist. Fail ini boleh dimuat turun.

Kemudian
kelas PositionObserver boleh diimport seperti ini:

import { PositionObserver } from "./position-observer.js";

Kemudian buat contoh PositionObserver ini seperti ini:

const positionObs = new PositionObserver(posObsCallback);

di mana posObsCallback ialah sebarang fungsi yang menerima jenis parameter objek:

 {
  x: number;
  y: number;
  target: HTMLElement | Element;
  outOfViewport: boolean;
  rootBounds: DOMRect | null;
};

Ini akan menjadi fungsi yang akan dipanggil sebagai panggilan balik apabila positionObserver mengesan perubahan kedudukan. Parameter:

• x : mewakili koordinat x sasaran
• y : mewakili koordinat y sasaran
• sasaran: mewakili sasaran itu sendiri
• outOfViewport: mewakili jika sasaran telah keluar dari kawasan visual port pandang
• rootBounds: mewakili sempadan elemen akar atau tetingkap penangkapan. Berguna untuk tujuan nyahpepijat.

Sehingga kini positionObserver telah disediakan. Sekarang untuk mengesan perubahan kedudukan sesuatu elemen, kita perlu memerhatikannya seperti:

positionObs.observe(target);

di mana sasaran mewakili elemen sebenar yang ingin kita perhatikan.
Untuk berhenti memerhatikan perubahan kedudukan, kita boleh menggunakannya seperti:

positionObs.disconnect()

Anda juga boleh melawati https://github.com/AJK-Essential/Position-Observer/blob/main/docs/target-scroll.html dan lihat bahagian skrip untuk melihat contoh pelaksanaan

Batasan pemerhati ini:

1. Ia hanya boleh mengesan perubahan kedudukan apabila sasaran bergerak dalam kawasan visual.
2. Apabila terdapat perubahan saiz port pandang atau sasaran, ia mungkin gagal. Jadi dalam senario tersebut, lebih baik putuskan sambungan dan kemudian perhatikan sasaran sekali lagi.

Jadi adakah ini penyelesaian yang sempurna ?

Saya tidak tahu. Ia berfungsi mengikut ujian saya. Mungkin terdapat senario di mana ia mungkin tidak berfungsi…
Apa yang saya cadangkan ialah menggunakan ini dalam kombinasi dengan mendengar tatal (dan gunakannya hanya sebagai pengganti pengundian berterusan) kerana saya perhatikan kadangkala ia terlepas menjejaki sasaran apabila ditatal dalam demo.

Jangan ragu untuk menggunakan dan menguji kod dalam repo Github ini
(https://github.com/AJK-Essential/Position-Observer), malah ubah suainya secara peribadi agar sesuai dengan keperluan projek/perniagaan anda atau jika anda telah menemui pepijat dan mempunyai penyelesaiannya juga untuk perkara yang sama.

Semoga ini dapat membantu !

Atas ialah kandungan terperinci Memerhatikan perubahan kedudukan elemen HTML menggunakan Intersection Observer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!