javascript - 有没有办法在页面加载时覆盖浏览器的默认滚动到散列行为？

Question

我有一个固定定位的标题，当用户向下滚动时，它会“向上滑动以隐藏”，类似于 Medium 上的标题(例如: https://medium.com/@sunknudsen/brute-forcing-your-very-own-vanity-onion-address-at-11-646mh-s-9a9c1fa93663#368a )。

问题出在 iOS 上，当浏览器在页面加载时滚动到散列(例如，媒体上的 #368a)，标题下会出现一些内容(例如媒体上的 How to get your very own vanity onion address?)。

我希望处理(覆盖)默认滚动到哈希逻辑(类似于 event.preventDefault() 之类的东西)以更好地控制滚动的位置，包括标题的高度等。

我能够使用以下逻辑处理 React 上的页面内导航。

const scrollWithOffset = (element: HTMLElement, offset:number) => {
  let offsetTop = element.getBoundingClientRect().top;
  const elementPosition = offsetTop - offset - 20;
  window.scroll({
    top: elementPosition,
    left: 0,
    behavior: 'smooth'
  });
};

<HashLink
  to={props.href}
  scroll={el => scrollWithOffset(el, 104)}
  smooth
>{props.children}</HashLink>

希望将相同的逻辑应用于页面加载时的默认滚动到散列行为。

Answer 1

我希望在这种情况下，您的滑动到隐藏标题会向上滑动并隐藏，作为其定义方式的一部分。

如果没有，您可以回复 DOMContentLoaded和 window load事件通过查看 window.scrollY并在那时触发滑动到隐藏行为。

如果您的目标是让浏览器不滚动到元素，这对我有用(iOS Safari、Chrome 和 Brave):

window.addEventListener("DOMContentLoaded", function() {
    if (location.hash === "#foo") {
        setTimeout(function() {
            window.scrollTo(0,0);
        }, 0);
    }
});

它在 URL 中保留哈希值，但将窗口滚动到顶部。我在实验中没有看到闪光，但你的里程可能会有所不同。