Saya memuat elemen melalui AJAX. Beberapa di antaranya hanya terlihat jika Anda menggulir ke bawah halaman.
Apakah ada cara saya bisa tahu jika suatu elemen sekarang di bagian yang terlihat dari halaman?
javascript
jquery
scroll
yoavf
sumber
sumber
Library.IsElementVisibleInContainer = function (elementSelector, containerSelector) { var containerViewTop = $(containerSelector).offset().top; var containerViewBottom = containerViewTop + $(containerSelector).height();
Jawaban:
Ini harus melakukan trik:
Fungsi Utilitas Sederhana Ini akan memungkinkan Anda untuk memanggil fungsi utilitas yang menerima elemen yang Anda cari dan jika Anda ingin elemen tersebut sepenuhnya terlihat atau sebagian.
Pemakaian
sumber
window.innerHeight
sebagai gantinyaelemTop
aku dulu$(elem).position().top
danelemBottom
aku duluelemTop + $(elem).outerHeight(true)
.Jawaban ini di Vanilla:
sumber
isVisible = elementTop < window.innerHeight && elementBottom >= 0
? Jika tidak, setengah elemen pada layar mengembalikan false.Pembaruan: gunakan IntersectionObserver
Metode terbaik yang saya temukan sejauh ini adalah plugin jQueryerge . Bekerja seperti pesona.
sumber
appear plugin
dan Anda mungkin hanya perlu menambahkan!
tempat untuk mendapatkandisappear
plugin.Inilah solusi JavaScript murni saya yang berfungsi jika tersembunyi di dalam wadah yang dapat digulir juga.
Demo di sini (coba ubah ukuran jendela juga)
EDIT 2016-03-26: Saya telah memperbarui solusi untuk akun untuk menggulir melewati elemen sehingga tersembunyi di atas bagian atas wadah yang dapat digulir. EDIT 2018-10-08: Diperbarui untuk menangani ketika digulirkan dari tampilan di atas layar.
sumber
return top <= document.documentElement.clientHeight && top >= 0;
Menggunakan IntersectionObserver API (asli di browser modern)
Mudah & efisien untuk menentukan apakah suatu elemen terlihat di viewpor, atau dalam wadah yang dapat digulir, dengan menggunakan pengamat .
Kebutuhan untuk melampirkan
scroll
acara dan secara manual memeriksa event callback dihilangkan, sehingga efisiensi:Lihat tabel dukungan browser (tidak didukung di IE / Safari)
sumber
Plugin jQuery Waypoints berjalan sangat baik di sini.
Ada beberapa contoh di situs plugin .
sumber
$('#my-div').waypoint(function() { console.log('Hello there!'); }, { offset: '100%' });
Bagaimana tentang
Setelah itu, Anda dapat memicu apa pun yang Anda inginkan setelah elemen dalam tampilan seperti ini
Itu baik-baik saja bagi saya
sumber
WebResourcesDepot menulis skrip untuk dimuat saat menggulir yang menggunakan jQuery beberapa waktu lalu. Anda dapat melihat Demo Langsung mereka Di Sini . Fungsi mereka adalah sebagai berikut:
sumber
Fungsi keren Tweeked Scott Dowding untuk kebutuhan saya - ini digunakan untuk menemukan apakah elemen tersebut baru saja menggulir ke layar yaitu tepi atas.
sumber
Vanila polos untuk memeriksa apakah elemen (
el
) terlihat di div yang dapat digulir (holder
)Penggunaan dengan jQuery:
sumber
isScrolledIntoView adalah fungsi yang sangat diperlukan, jadi saya mencobanya, berfungsi untuk elemen yang tidak lebih tinggi dari viewport, tetapi jika elemen lebih besar karena viewport tidak berfungsi. Untuk memperbaikinya dengan mudah ubah kondisinya
untuk ini:
Lihat demo di sini: http://jsfiddle.net/RRSmQ/
sumber
Sebagian besar jawaban di sini tidak memperhitungkan bahwa suatu elemen juga dapat disembunyikan karena itu digulirkan dari pandangan div, tidak hanya seluruh halaman.
Untuk menutupi kemungkinan itu, Anda pada dasarnya harus memeriksa apakah elemen diposisikan di dalam batas masing-masing orang tuanya.
Solusi ini melakukan hal itu:
Ini juga memungkinkan Anda menentukan berapa persentase yang harus terlihat di setiap arah.
Itu tidak mencakup kemungkinan bahwa itu mungkin disembunyikan karena faktor lain, seperti
display: hidden
.Ini harus bekerja di semua browser utama, karena hanya digunakan
getBoundingClientRect
. Saya pribadi mengujinya di Chrome dan Internet Explorer 11.sumber
sumber
Berikut ini solusi lain dari http://web-profile.com.ua/
Lihat di JSFiddle
sumber
Ini mempertimbangkan padding, border, atau margin elemen yang dimiliki serta elemen yang lebih besar dari viewport itu sendiri.
Untuk menyebutnya gunakan sesuatu seperti ini:
sumber
Ada plugin untuk jQuery yang disebut inview yang menambahkan acara "inview" baru.
Berikut ini beberapa kode untuk plugin jQuery yang tidak menggunakan acara:
Saya menemukan ini dalam komentar di sini ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) oleh seorang pria bernama James
sumber
Saya perlu memeriksa visibilitas pada elemen di dalam wadah DIV yang dapat digulir
sumber
e.style.opacity > 0
ke(!e.style.opacity || e.style.opacity > 0)
karena secara default itu adalah string kosong untuk saya di FF.Membangun dari jawaban hebat ini , Anda dapat menyederhanakannya sedikit lebih jauh menggunakan ES2015 +:
Jika Anda tidak peduli tentang bagian atas keluar dari jendela dan hanya peduli bahwa bagian bawah telah dilihat, ini dapat disederhanakan
atau bahkan satu-liner
sumber
Anda dapat menggunakan plugin jquery "onScreen" untuk memeriksa apakah elemen tersebut ada di viewport saat ini ketika Anda menggulir. Plugin mengatur ": onScreen" pemilih menjadi true ketika pemilih muncul di layar. Ini adalah tautan untuk plugin yang dapat Anda sertakan dalam proyek Anda. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "
Anda dapat mencoba contoh di bawah ini yang berfungsi untuk saya.
Kode HTML:
CSS:
sumber
Saya memiliki metode seperti itu dalam aplikasi saya, tetapi tidak menggunakan jQuery:
Sunting: Metode ini bekerja dengan baik untuk IE (setidaknya versi 6). Baca komentar untuk kompatibilitas dengan FF.
sumber
var visibleBottom = visibleTop + window.innerHeight;
Saya tidak menggunakan jQuery dan Anda membantu saya menemukan jawaban yang benar.Jika Anda ingin mengubah ini untuk menggulir item dalam div lain,
sumber
Dimodifikasi jawaban yang diterima sehingga elemen harus memiliki properti tampilan diatur ke sesuatu selain "tidak ada" agar kualitas terlihat.
sumber
Berikut adalah cara untuk mencapai hal yang sama menggunakan Mootools, secara horizontal, vertikal atau keduanya.
sumber
Contoh didasarkan dari jawaban ini untuk memeriksa apakah suatu elemen terlihat 75% (yaitu kurang dari 25% tidak aktif di layar).
sumber
Ada lebih dari 30 jawaban untuk pertanyaan ini, dan tidak satupun dari mereka menggunakan solusi JS murni yang sangat sederhana yang telah saya gunakan. Tidak perlu memuat jQuery hanya untuk menyelesaikan ini, karena banyak yang mendorong.
Untuk mengetahui apakah elemen tersebut berada dalam viewport, pertama-tama kita harus menentukan posisi elemen dalam tubuh. Kita tidak perlu melakukan ini secara rekursif seperti yang pernah saya pikirkan. Sebagai gantinya, kita bisa menggunakan
element.getBoundingClientRect()
.Nilai ini adalah perbedaan Y antara bagian atas objek dan bagian atas tubuh.
Kami kemudian harus memberi tahu apakah elemen tersebut dalam tampilan. Sebagian besar implementasi bertanya apakah elemen lengkap berada dalam viewport, jadi inilah yang akan kita bahas.
Pertama-tama, posisi atas jendela adalah:
window.scrollY
.Kita bisa mendapatkan posisi bawah jendela dengan menambahkan ketinggian jendela ke posisi atasnya:
Mari kita membuat fungsi sederhana untuk mendapatkan posisi teratas elemen:
Fungsi ini akan mengembalikan posisi teratas elemen dalam jendela atau akan kembali
0
jika Anda memberikan sesuatu selain elemen dengan.getBoundingClientRect()
metode. Metode ini sudah ada sejak lama, jadi Anda tidak perlu khawatir browser Anda tidak mendukungnya.Sekarang, posisi teratas elemen kami adalah:
Dan posisi dasar elemen adalah:
Sekarang kita dapat menentukan apakah elemen tersebut dalam viewport dengan memeriksa apakah posisi bawah elemen lebih rendah dari posisi atas viewport dan dengan memeriksa apakah posisi teratas elemen lebih tinggi dari posisi bawah viewport:
Dari sana, Anda dapat melakukan logika untuk menambah atau menghapus
in-view
kelas pada elemen Anda, yang kemudian dapat Anda tangani dengan efek transisi di CSS Anda.Saya benar-benar kagum bahwa saya tidak menemukan solusi ini di tempat lain, tetapi saya percaya bahwa ini adalah solusi paling bersih dan paling efektif, dan itu tidak mengharuskan Anda memuat jQuery!
sumber
Versi yang lebih efisien dari jawaban ini :
sumber
Metode ini akan mengembalikan true jika ada bagian elemen yang terlihat di halaman. Ini bekerja lebih baik dalam kasus saya dan dapat membantu orang lain.
sumber
Modifikasi sederhana untuk div yang dapat digulir (wadah)
CATATAN: ini tidak berfungsi jika elemen lebih besar dari div yang dapat digulir.
sumber
Saya mengadaptasi ekstensi fungsi jQuery singkat ini, yang dapat Anda rasa bebas untuk digunakan (lisensi MIT).
sumber
Saya telah menulis sebuah komponen untuk tugas ini, yang dirancang untuk menangani sejumlah besar elemen dengan sangat cepat (hingga <10ms untuk 1000 elemen pada ponsel yang lambat ).
Ia bekerja dengan setiap jenis wadah gulir yang Anda miliki akses - jendela, elemen HTML, iframe tertanam, jendela anak spawned - dan sangat fleksibel dalam apa yang dideteksi ( visibilitas penuh atau sebagian , kotak batas atau kotak konten , zona toleransi khusus , dll. ).
Rangkaian uji yang sangat besar dan sebagian besar dihasilkan secara otomatis memastikan bahwa ia berfungsi seperti yang diiklankan, lintas-peramban .
Cobalah jika Anda suka: jQuery.isInView . Kalau tidak, Anda mungkin menemukan inspirasi dalam kode sumber, misalnya di sini .
sumber