基于 Chrome 的浏览器 - ScrollTo 和锚链接不起作用答案

【问题标题】：Chrome based browsers - ScrollTo and anchor links not working基于 Chrome 的浏览器 - ScrollTo 和锚链接不起作用
【发布时间】：2022-01-06 14:17:19
【问题描述】：

我正在尝试建立一个投资组合网站，其中电梯向上移动，当它到达楼层时，门打开并呈现细节。当进一步滚动时，门会关闭，当它到达某个点时，它会卡住并平滑滚动到最近的楼层。

我已经让它在 Firefox 中运行良好，但不是基于 chrome 的浏览器，这让我很困惑。我还可以让基于 chrome 的浏览器移动到哈希锚点或滚动视图，但只有在使用按钮触发它们时，当交叉点观察者调用代码时它们永远不会工作？？？

我正在使用交叉点观察器来检测哪个楼层可见并启动打开和关闭事件，并使用单独的观察器来检测楼层在屏幕上的 50% 何时捕捉到最近的楼层。

我首先尝试使用 scroll-snap 来避开第二个路口观察者来对齐地板，但这在任何浏览器上都不起作用？？

.container-projects {
    z-index: -2;
    min-height: 80vh;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    scroll-snap-type: y proximity;
}

.project {
    z-index: -2;
    background-size: cover;
    width: 100%;
    height: 80vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
    scroll-snap-align: start;
}

接下来我尝试使用 scrollToView() 函数，该函数在 firefox 中运行良好，但在基于 chrome 时却不行？？

const floorObserver = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.scrollIntoView({ behavior: 'smooth', block: 'end' });
            }
        });
    },
    { threshold: 0.5 }
);

我还尝试使用锚链接让交叉点观察者找到地板，这在 Firefox 中又可以正常工作，但在 chrome 中却不行？？

const floorObserver = new IntersectionObserver(
    (entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                move(entry.target.id);
                
            }
        });
    },
    { threshold: 0.5 }
);

function move(entry) {
    window.location.href = '#' + entry;

}

我感觉可能是因为鼠标滚动优先于 scrollTo 和锚链接，但我真的不明白发生了什么？

非常感谢任何帮助，但如果没有 JQuery 的帮助，我们将更加感谢。

非常感谢

杰夫

【问题讨论】：

标签： javascript google-chrome firefox scroll-snap js-scrollto

【解决方案1】：

我已经解决了我自己的问题哎呀哎呀！

最后，我无法在基于 chrome 的浏览器中使用 hash change 或 scrollto 函数，所以我回到了开始的地方并再次使用 scroll snap 播放并发现问题是 scroll-snap 父容器的父容器它是 position: relative 当更改为 position: fixed 时一切正常。

【讨论】：