Question

所以我一直在使用ScrollIntoView（）作为Web应用程序的一部分跳转到react组件中的锚点。对于小页面，它工作正常，去正确的位置，并按照人们的预期行事。我有一个较大的页面，行为很奇怪。在加载时，跳转到锚点的位置应低于半页或更多。第一次点击指向任何锚点的链接（包括相同的锚点）时，锚点会以相似的数量结束。只要页面未重新加载，之后的每次后续点击都会完美运行。这是我的功能代码。它有一个setTimeout，因为我认为这个问题与页面加载有关，但是没有效果。这是我的功能：

scrollToAnchor: function () {
    let anchorName = this.props.location.hash || window.location.hash;
    if (anchorName) {
        anchorName = anchorName.replace("#", "");
        let anchorElement = document.getElementById(anchorName);
        if (anchorElement) {
            window.setTimeout(anchorElement.scrollIntoView(true), 0);
        }
    } else  {
        window.scrollTo(0, 0);
    }
},

Answer 1

在我的情况下，我必须手动添加默认参数，以便它在某些浏览器中工作。 block和inline参数具有关联的默认值，但我必须手动将它们放入：

my_element.scrollIntoView(
   { behavior: 'smooth' , block: 'start', inline: 'nearest'}
);

一旦我在scrollIntoViewOptions中定义了它，它在所有浏览器中都运行良好。

PS：不要忘记polyfill进行平滑滚动。

如何获得一致的ScrollIntoView行为

1 个答案: