目录

• 元素位置属性
• 获取元素四周与浏览器屏幕视窗位置方法
• 浏览器屏幕可视宽高
• 鼠标位置
• 鼠标在某元素上的位置
• 滚动位置

元素位置属性

如果不了解盒子模型建议先阅读一下：css 盒子模型详解。

获取元素四周与浏览器屏幕视窗位置方法

要想获得与屏幕的关系，一般是在有滚动的情况下可以用于计算，用到的是元素的getBoundingClientRect方法。

该方法返回的对象上存在如下属性：

浏览器屏幕可视宽高

小知识：document.documentElement就可以看作html标签元素也就是主根元素、document.body就是body标签元素也就是文档元素。

鼠标位置

    document.getElementById('box').onmousemove = (e) => {
        console.log(e.x,e.y)
    }

鼠标在某元素上的位置

    const box = document.getElementById('box')
    box.onmousemove = (e) => {
        console.log(
            e.x - box.getBoundingClientRect().x,
            e.y - box.getBoundingClientRect().y
        )
    }

滚动位置

小知识：如果不是自己设定的div滚动窗口，就用浏览器的滚动窗口，有很多种监听事件。window.onscroll、document.onscroll、document.body.onscroll、document.documentElement.onscroll这些都是一个效果，但是兼容性不一。最好统一就使用window.onscroll，它的兼容性最好，基本支持所有浏览器。如果是自己设定的div滚动框也可以，同样没有兼容问题。