面试题：JavaScript 中如何获取文档的滚动位置

Question

在JavaScript中，写出获取页面垂直和水平滚动位置的代码。并解释不同浏览器环境下可能存在的兼容性问题及解决方案。

Answer 1

获取页面垂直和水平滚动位置的代码

在现代浏览器中，可以使用 window.pageXOffset 和 window.pageYOffset 来获取页面的水平和垂直滚动位置。代码示例如下：

// 获取水平滚动位置
const horizontalScroll = window.pageXOffset;
// 获取垂直滚动位置
const verticalScroll = window.pageYOffset;
console.log(`水平滚动位置: ${horizontalScroll}`);
console.log(`垂直滚动位置: ${verticalScroll}`);

兼容性问题及解决方案

1. IE8 及以下浏览器：IE8 及以下不支持 window.pageXOffset 和 window.pageYOffset。在这些浏览器中，可以通过 document.documentElement.scrollLeft（水平）和 document.documentElement.scrollTop（垂直）获取滚动位置，但需要注意当 DOCTYPE 缺失时，要使用 document.body.scrollLeft 和 document.body.scrollTop。 解决方案代码如下：

function getScrollPosition() {
    let x = 0, y = 0;
    if (typeof window.pageXOffset === 'number') {
        x = window.pageXOffset;
        y = window.pageYOffset;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    } else if (document.body) {
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }
    return {x, y};
}
const {x: horizontal, y: vertical} = getScrollPosition();
console.log(`水平滚动位置: ${horizontal}`);
console.log(`垂直滚动位置: ${vertical}`);

这段代码通过检测不同的属性来兼容各种浏览器环境，确保在不同浏览器中都能准确获取页面的滚动位置。