跳到主要内容

位置计算

2024年01月18日
柏拉文
越努力，越幸运

一、相对于元素​

二、相对于视口​

三、相对于元素​

3.1 clientXY、boundingClientRect​

e.clientX/e.clientY: 相对于视口坐标, 相对于浏览器视窗左上角的坐标，不考虑页面滚动

el.getBoundingClientRect(): 包含了元素的大小及其相对于视口的位置信息

实现如下

function getRelativeOfElPosition(e, el) {
    const rect = el.getBoundingClientRect();
    const x = e.pageX - rect.left;
    const y = e.pageY - rect.top - window.scrollY;
    return [x, y];
}

3.1 pageXY、scrollXY、boundingClientRect​

e.pageX/e.pageY: 获取的是相对于整个文档左上角的坐标，它们会随着页面的滚动而改变。

scrollX/scrollY: 页面滚动距离

e.getBoundingClientRect(): 包含了元素的大小及其相对于视口的位置信息

实现如下

function getRelativeOfElPosition(e, el) {
    const rect = el.getBoundingClientRect();
    const x = e.pageX - rect.left - window.scrollX;
    const y = e.pageY - rect.top - window.scrollY;
    return [x, y];
}