Pelaksanaan JS/VueJS untuk menentukan baris atas dan bawah yang boleh dilihat pada masa ini dalam jadual HTML

Question

Saya mempunyai jadual HTML standard yang mengandungi thead dan tbody, bilangan baris dalam tbody boleh menjadi sebarang nombor kerana ia bergantung pada saiz tatasusunan.

Meja mempunyai ketinggian maksimum supaya ia boleh ditatal. Semasa jadual menatal, saya mahu dapat mengira baris atas dan bawah yang baru dipaparkan.

Selain itu, saya tidak boleh menggunakan jquery untuk mencapai ini, saya hanya mahu menggunakan javascript.

Saya mencuba jawapan yang diterima untuk soalan ini tetapi nampaknya tidak tepat dan kadangkala tersalah mengira bilangan baris 2-7... Menentukan baris teratas dalam jadual html

Answer 1

Anda boleh menggunakan API IntersectionObserver untuk menyemak baris yang boleh dilihat dalam jadual induk. Tambahkan pemerhati persimpangan untuk setiap baris dan gunakan isIntersecting untuk menyemak sama ada baris itu kelihatan.

const rows = document.querySelector('.row')

const rowsObserver = new IntersectionObserver(entries => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          (在这里添加您的代码)
        } else {
          (在这里添加您的代码)
        }
      })
    })

rowsObserver.observe(rows)

Untuk mengira baris pertama dan terakhir kelihatan, anda boleh menambah atau mengalih keluar setiap baris pada tatasusunan "visibleElements" apabila keterlihatan mereka berubah atau menukar kelas "kelihatan".