getScrollbarWidth

Category Sensors

Gets the scrollbar width of an element.

This works in browsers that do not use absolute positioning for scrollbars, such as Chrome on desktop.

Demo

Current Width : X = 0px | Y = 0px

Scrollbar thickness ?
Overflow axis ?

Usage

<script>
    import { getScrollbarWidth } from '@sv-use/core';
 
    let el = $state();
    const width = getScrollbarWidth(() => el);
</script>
 
<div bind:this={el} style="overflow-y: scroll"></div>

Type Definitions

import type { CleanupFunction, MaybeGetter } from '../__internal__/types.js';
type GetScrollbarWidthReturn = {
    readonly x: number;
    readonly y: number;
    cleanup: CleanupFunction;
};
/**
 * Gets the scrollbar width of an element.
 * @param element The element on which to get the scrollbar width from.
 * @see https://svelte-librarian.github.io/sv-use/core/get-scrollbar-width
 */
export declare function getScrollbarWidth(element: MaybeGetter<HTMLElement | null | undefined>): GetScrollbarWidthReturn;
export {};

Sources