7

因此，我一直在使用 ScrollIntoView() 作为 Web 应用程序的一部分跳转到反应组件中的锚点。对于小页面，它可以正常工作，到达正确的位置并按预期运行。我有一个较大的页面，其中行为很奇怪。在加载时，跳转到锚点的位置低于它应该在半页或更多的位置。第一次单击指向任何锚点的链接时，包括相同的锚点，该锚点最终会以相似的数量出现在它应该在的位置之上。只要页面没有重新加载，之后的每次点击都可以完美运行。这是我的函数代码。它有一个 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);
    }
},
4

1 回答 1

1

就我而言，我必须手动添加默认参数才能使其在某些浏览器中工作。block和参数有一个关联的inline默认值，但我必须像这样手动输入它们：

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

一旦我在scrollIntoViewOptions中定义了它们，它就可以在所有浏览器中正常工作。

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

于 2017-10-02T22:42:01.863 回答