Bounds

`ElementBounds`

Type: interface

width: int
height: int
top: int
left: int
right: int
bottom: int

Bindings

It is suggested to set the tracking parameters to false, and only use the ones you need.

Depending on the circumstances, having all 3 activated can be excessive.

details

[<Erase; AutoOpen>]
type Bounds =
    /// <summary>
    /// Creates a reactive store-like object of current element bounds — position on the screen, and size dimensions. Bounds will be automatically updated on scroll, resize events and updates to the DOM.
    /// </summary>
    /// <param name="target">Ref or reactive ref element</param>
    /// <param name="trackScroll">Listen to window scroll events</param>
    /// <param name="trackMutation">Listen to changes to the dom structure/styles</param>
    /// <param name="trackResize">Listen to changes to the element's resize events</param>
    /// <remarks>All options are 'truthy' by default</remarks>
    [<ImportMember(path); ParamObject(1)>]
    static member createElementBounds(target: #HTMLElement,
                                      ?trackScroll: bool,
                                      ?trackMutation: bool,
                                      ?trackResize: bool): ElementBounds = jsNative
    /// <summary>
    /// Creates a reactive store-like object of current element bounds — position on the screen, and size dimensions. Bounds will be automatically updated on scroll, resize events and updates to the DOM.
    /// </summary>
    /// <param name="target">Ref or reactive ref element</param>
    [<ImportMember(path)>]
    static member createElementBounds(target: #HTMLElement): ElementBounds = jsNative
    /// <summary>
    /// Creates a reactive store-like object of current element bounds — position on the screen, and size dimensions. Bounds will be automatically updated on scroll, resize events and updates to the DOM.
    /// </summary>
    /// <param name="target">Ref or reactive ref element</param>
    /// <param name="trackScroll">Listen to window scroll events</param>
    /// <param name="trackMutation">Listen to changes to the dom structure/styles</param>
    /// <param name="trackResize">Listen to changes to the element's resize events</param>
    /// <remarks>All options are 'truthy' by default</remarks>
    [<ImportMember(path); ParamObject(1)>]
    static member createElementBounds(target: Accessor<#HTMLElement>,
                                      ?trackScroll: bool,
                                      ?trackMutation: bool,
                                      ?trackResize: bool): ElementBounds = jsNative
    /// <summary>
    /// Creates a reactive store-like object of current element bounds — position on the screen, and size dimensions. Bounds will be automatically updated on scroll, resize events and updates to the DOM.
    /// </summary>
    /// <param name="target">Ref or reactive ref element</param>
    [<ImportMember(path)>]
    static member createElementBounds(target: Accessor<#HTMLElement>): ElementBounds = jsNative

Last updated: 7/9/25, 7:54 PM