Function leptos_use::use_intersection_observer

source · 
pub fn use_intersection_observer<El, T, F>(
    target: El,
    callback: F
) -> UseIntersectionObserverReturn<impl Fn() + Clone, impl Fn() + Clone, impl Fn() + Clone>
where
    El: Into<ElementsMaybeSignal<T, Element>>,
    T: Into<Element> + Clone + 'static,
    F: FnMut(Vec<IntersectionObserverEntry>, IntersectionObserver) + 'static,
Expand description

Reactive IntersectionObserver.

Detects that a target element’s visibility inside the viewport.

§Demo

Link to Demo

§Usage

let el = create_node_ref::<Div>();
let (is_visible, set_visible) = create_signal(false);

use_intersection_observer(
    el,
    move |entries, _| {
        set_visible.set(entries[0].is_intersecting());
    },
);

view! {
    <div node_ref=el>
        <h1>"Hello World"</h1>
    </div>
}

§Server-Side Rendering

On the server this amounts to a no-op.

§See also

  • [use_element_visibility]