JS中计算可视距离高度问题_js 计算view在页面的可视距离-优快云博客

本文链接：https://blog.youkuaiyun.com/Victor_Cindy1/article/details/53381867

本文介绍了一种获取HTML元素在页面上的绝对位置的方法，包括元素相对于视口的位置计算，并提供了相关JavaScript函数实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default {
    getElementLeft(element) {
        let actualLeft = element.offsetLeft
        let current = element.offsetParent

        while (current !== null) {
            actualLeft += current.offsetLeft
            current = current.offsetParent
        }

        return actualLeft
    },

    getElementViewLeft(element) {
        let actualLeft = this.getElementLeft(element)
        let elementScrollLeft = element.scrollLeft
        let current = element.parentNode
        while(current != null) {
            elementScrollLeft += current.scrollLeft ? current.scrollLeft : 0
            current = current.parentNode
        }
        return actualLeft-elementScrollLeft
    },

    getElementTop(element) {
        let actualTop = element.offsetTop
        let current = element.offsetParent

        while (current !== null) {
            actualTop += current.offsetTop
            current = current.offsetParent
        }

        return actualTop
    },

    getElementViewTop(element) {
        let actualTop = this.getElementTop(element)
        let elementScrollTop = element.scrollTop
        let current = element.parentNode
        while(current != null) {
            elementScrollTop += current.scrollTop ? current.scrollTop : 0
            current = current.parentNode
        }
        return actualTop-elementScrollTop
    },

    getStyle(element, attr) {
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr]
    }
}