Question

当我重定向到一个新页面时，我试图滚动到一个锚点。我尝试了不同的事情，但没有成功。现在它向下滚动，但没有显示我需要的整个 HTML 元素，它只显示元素的标题。这是重定向到新页面

this.router.navigate(['/controllo/' + result.id], {fragment: 'assegnazioneContatto'});

这是我滚动到元素的方式

ngOnInit() {
    this.routeParams.fragment.subscribe(fragment => {
        if(window.document.getElementById(fragment)) {
          this.fragment = fragment; 
          window.document.getElementById(this.fragment).scrollIntoView();
       }
      });
}

这是 HTML 元素

<div class="row" [hidden]="!showAssegnazioneContatto()" id="assegnazioneContatto"></div>

我做错了什么？我在 stackoverflow 中看到了其他问题，但我没有找到任何解决方案。

附注。如果我在控制台中运行代码，它工作正常

Answer 1

根据您的问题，我了解到滚动条的行为方式显示了大部分前面的元素和新元素的开头。

这个 jsFiddle 能说明你的情况吗？ https://jsfiddle.net/eqzkpr8a/3/

尝试使用 scrollIntoView() 的选项：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters。特别是 block 属性，它根据其祖先元素定义页面的垂直对齐方式。

换句话说，block 属性可能有四个可能的值：start、center、end、和最近的。属性垂直对齐页面

start：在其祖先元素的开始处；
center：在其祖先元素的中心；
end：在其祖先元素的末尾；
nearest：朝向其祖先元素的 start 或 end，基于离滚动元素最近的任何元素。

Answer 2

两个选项。您是否尝试过 .focus({ preventScroll: false }) 或者您是否尝试过设置元素的 tabindex="1" ？因为我必须这样做才能让我自己的滚动功能正常工作。

Angular5 - 滚动到锚点

2 个答案: