Get the exact offset of the element

adopt getBoundingClientRect obtain （ recommend ）

const getOffset = (element: HTMLElement) => {
    
    const elemRect = element.getBoundingClientRect();
    const offsetY = elemRect.top + window.scrollY;
    const offsetX = elemRect.left + window.scrollX;
    return {
    
        left: offsetX,
        top: offsetY,
    };
};

adopt offsetParent obtain ,（ If the element has translate(xx,xx), It will fail

const getOffset = (
    element: HTMLElement,
    type: 'offsetTop' | 'offsetLeft'
): number => {
    
    let actualOffset = element[type];
    let current = element.offsetParent as HTMLElement;

    while (current !== null) {
    
        actualOffset += current[type];
        current = current.offsetParent as HTMLElement;
    }
    return actualOffset;
};

Reference documents