element-vir - v26.14.0
    Preparing search index...

    Variable onIntersectConst

    onIntersect: (
        ...values: [
            options: IntersectionObserverInit,
            callback: OnIntersectCallback,
        ],
    ) => DirectiveResult<typeof __class> = ...

    A directive that fires its listener any time the element's configured "intersection" is crossed. This is commonly use for detecting when an element has scrolled into view. This uses the built-in IntersectionObserver API, so it is very efficient.

    Type Declaration

      • (
            ...values: [
                options: IntersectionObserverInit,
                callback: OnIntersectCallback,
            ],
        ): DirectiveResult<typeof __class>

      • Parameters

        Returns DirectiveResult<typeof __class>

    import {html, defineElement, onIntersect} from 'element-vir';

    const MyElement = defineElement()({
        tagName: 'my-element',
        render() {
            return html`
                <div
                    ${onIntersect({threshold: 1}, ({element, entry}) => {
                        if (entry.isIntersecting) {
                            console.log('is intersecting!');
                        } else {
                            console.log('is not intersecting');
                        }
                    })}
                >
                    Some div
                </div>
            `;
        },
    });

    Settings

    Member Visibility