面试题：JavaScript 跨浏览器文档滚动位置处理及兼容性问题

Question

不同浏览器在处理文档滚动位置时可能存在兼容性差异。请详细说明这些差异，并提供一套能兼容主流浏览器（如 Chrome、Firefox、Safari、Edge）的获取和设置文档滚动位置的 JavaScript 解决方案。同时，解释如何处理在一些特殊场景下（如在 iframe 中、页面有固定定位元素等）可能出现的滚动位置相关的兼容性问题。

Answer 1

浏览器处理文档滚动位置的兼容性差异

1. 获取滚动位置：
   • Chrome、Firefox、Edge：可以通过 window.pageXOffset 和 window.pageYOffset 获取文档滚动位置，这两个属性是标准属性，返回文档在水平和垂直方向上滚动的像素值。
   • Safari：早期版本不支持 window.pageXOffset 和 window.pageYOffset，需要通过 document.documentElement.scrollLeft（水平）和 document.documentElement.scrollTop（垂直）获取，在标准模式下，也可以使用 window.pageXOffset 和 window.pageYOffset。对于怪异模式，需要使用 document.body.scrollLeft 和 document.body.scrollTop。
2. 设置滚动位置：
   • Chrome、Firefox、Edge：可以使用 window.scrollTo(x, y) 方法，其中 x 和 y 分别是水平和垂直方向要滚动到的位置。也可以使用 window.scrollBy(dx, dy)，dx 和 dy 是相对当前位置要滚动的偏移量。
   • Safari：同样支持 window.scrollTo(x, y) 和 window.scrollBy(dx, dy)，但在早期版本的兼容性上与其他浏览器略有不同，需要更细致的测试。

兼容主流浏览器的 JavaScript 解决方案

1. 获取滚动位置：

function getScrollPosition() {
    return {
        x: window.pageXOffset !== undefined? window.pageXOffset : (document.documentElement.scrollLeft || document.body.scrollLeft),
        y: window.pageYOffset !== undefined? window.pageYOffset : (document.documentElement.scrollTop || document.body.scrollTop)
    };
}

2. 设置滚动位置：

function setScrollPosition(x, y) {
    if (window.pageXOffset!== undefined) {
        window.scrollTo(x, y);
    } else {
        document.documentElement.scrollLeft = x;
        document.documentElement.scrollTop = y;
        document.body.scrollLeft = x;
        document.body.scrollTop = y;
    }
}

特殊场景下的兼容性问题处理

1. 在 iframe 中：
   • 获取滚动位置：需要先获取 iframe 的 contentWindow，然后在其上下文中获取滚动位置。例如，假设 iframe 的 id 为 myIframe：

function getIframeScrollPosition() {
    const iframe = document.getElementById('myIframe');
    if (iframe) {
        const iframeWindow = iframe.contentWindow;
        return {
            x: iframeWindow.pageXOffset!== undefined? iframeWindow.pageXOffset : (iframeWindow.document.documentElement.scrollLeft || iframeWindow.document.body.scrollLeft),
            y: iframeWindow.pageYOffset!== undefined? iframeWindow.pageYOffset : (iframeWindow.document.documentElement.scrollTop || iframeWindow.document.body.scrollTop)
        };
    }
    return {x: 0, y: 0};
}

- **设置滚动位置**：类似地，通过 `contentWindow` 设置滚动位置。

function setIframeScrollPosition(iframeId, x, y) {
    const iframe = document.getElementById(iframeId);
    if (iframe) {
        const iframeWindow = iframe.contentWindow;
        if (iframeWindow.pageXOffset!== undefined) {
            iframeWindow.scrollTo(x, y);
        } else {
            iframeWindow.document.documentElement.scrollLeft = x;
            iframeWindow.document.documentElement.scrollTop = y;
            iframeWindow.document.body.scrollLeft = x;
            iframeWindow.document.body.scrollTop = y;
        }
    }
}

2. 页面有固定定位元素： 固定定位元素通常不会影响文档滚动位置的获取和设置。但在某些情况下，固定定位元素可能会覆盖内容，导致视觉上滚动位置与实际预期不符。处理方法是在布局和样式设计时，确保固定定位元素不会干扰滚动内容的正常显示。如果出现固定定位元素导致滚动内容被遮挡，可以调整固定定位元素的 z - index 值，使其位于滚动内容的下层，或者调整滚动内容的 padding 或 margin，为固定定位元素留出空间。