0

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

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

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

我首先尝试使用滚动捕捉来避免第二个交叉点观察者对齐地板，但这在任何浏览器上都不起作用？

.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 的帮助。

非常感谢

杰夫

4

1 回答 1

0

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

最后，我无法让哈希更改或滚动功能在基于 chrome 的浏览器中工作，所以我回到我开始的地方并再次使用滚动快照播放并发现问题是滚动快照父容器的父容器它是位置：相对位置更改为：修复一切正常。

于 2022-01-07T14:28:02.273 回答