HTML/Document Trick

2024-02-26 149 words One minute

Contents

Understanding offsetWidth, clientWidth, scrollWidth

Note

All these property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

Get Scrollbar width

Reference: https://www.30secondsofcode.org/js/s/get-scrollbar-width/

Get window scroll bar width

1
2
3
4
const getScrollbarWidth = () =>
    window.innerWidth - document.documentElement.clientWidth;

getScrollbarWidth();

Get a element scroll bar width

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const getScrollbarWidth = (el) => {
    const leftBorder = parseInt(
        getComputedStyle(el).getPropertyValue('border-left-width'),
        10
    );
    const rightBorder = parseInt(
        getComputedStyle(el).getPropertyValue('border-right-width'),
        10
    );

    return el.offsetWidth - el.clientWidth - leftBorder - rightBorder;
};

getScrollbarWidth(el);

Element: getBoundingClientRect()

el.getBoundingClientRect() will return: left, top, right, bottom, x, y, width, and height.

x === left & y === top
In the standard box model, width and height will automatically calculate padding and border-width.
if box-sizing: border-box is set for the element this would be directly equal to its width or height.