滚动条距离和元素绝对位置计算记录-526互联

1. 滚动条距离写法

window.pageYOffset (老版语法，兼容IE9) 推荐
window.scrollX (新版语法，不兼容IE) 推荐
document.documentElement.scrollTop (其他方法)
document.body.scrollTop (其他方法)

直接用 window.pageYOffset 就行，既段，兼容性也好

2. 计算元素绝对位置

 var rect = element.getBoundingClientRect();
 var elementX = rect.left + window.pageXOffset;
 var elementY = rect.top + window.pageYOffset;

写法可以很简洁，无需在写较长的兼容代码

3. 计算鼠标与元素距离

document.addEventListener("mousemove", function (event) {
    // 获取鼠标位置
    var mouseX = event.pageX;
    var mouseY = event.pageY;

    var element;
    var rect = element.getBoundingClientRect();
    var elementX = rect.left + window.pageXOffset;
    var elementY = rect.top + window.pageYOffset;

    var distanceX = mouseX - elementX;
    var distanceY = mouseY - elementY;
    
    // 将距离值设置到每一个卡片元素上面
    element.style.setProperty('--x', distanceX + 'px');
    element.style.setProperty('--y', distanceY + 'px');
})