mirror of
https://github.com/adoyle0/leptos-use.git
synced 2025-01-23 09:09:21 -05:00
fixed intersection observer reporting non-intersection erroneously
This commit is contained in:
parent
270b153e61
commit
fb2103f314
1 changed files with 13 additions and 3 deletions
|
@ -40,7 +40,6 @@ use std::marker::PhantomData;
|
||||||
/// * [`use_intersection_observer`]
|
/// * [`use_intersection_observer`]
|
||||||
pub fn use_element_visibility<El, T>(target: El) -> Signal<bool>
|
pub fn use_element_visibility<El, T>(target: El) -> Signal<bool>
|
||||||
where
|
where
|
||||||
El: Clone,
|
|
||||||
El: Into<ElementMaybeSignal<T, web_sys::Element>>,
|
El: Into<ElementMaybeSignal<T, web_sys::Element>>,
|
||||||
T: Into<web_sys::Element> + Clone + 'static,
|
T: Into<web_sys::Element> + Clone + 'static,
|
||||||
{
|
{
|
||||||
|
@ -63,9 +62,20 @@ where
|
||||||
let (is_visible, set_visible) = create_signal(false);
|
let (is_visible, set_visible) = create_signal(false);
|
||||||
|
|
||||||
use_intersection_observer_with_options(
|
use_intersection_observer_with_options(
|
||||||
(target).into(),
|
target.into(),
|
||||||
move |entries, _| {
|
move |entries, _| {
|
||||||
set_visible.set(entries[0].is_intersecting());
|
// In some circumstances Chrome passes a first (or only) entry which has a zero bounding client rect
|
||||||
|
// and returns `is_intersecting` erroneously as `false`.
|
||||||
|
if let Some(entry) = entries
|
||||||
|
.into_iter()
|
||||||
|
.filter(|entry| {
|
||||||
|
let rect = entry.bounding_client_rect();
|
||||||
|
rect.width() > 0.0 || rect.height() > 0.0
|
||||||
|
})
|
||||||
|
.next()
|
||||||
|
{
|
||||||
|
set_visible.set(entry.is_intersecting());
|
||||||
|
}
|
||||||
},
|
},
|
||||||
UseIntersectionObserverOptions::default().root(options.viewport),
|
UseIntersectionObserverOptions::default().root(options.viewport),
|
||||||
);
|
);
|
||||||
|
|
Loading…
Add table
Reference in a new issue