Angular5 - 滚动到锚点答案

【问题标题】：Angular5 - Scrolling to anchorAngular5 - 滚动到锚点
【发布时间】：2021-05-28 21:23:06
【问题描述】：

当我重定向到新页面时，我正在尝试滚动到锚点。我尝试了不同的事情，但没有成功。现在它向下滚动，但它没有显示我需要的整个 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 中看到了其他问题，但我没有找到任何解决方案。

PS。如果我在控制台中运行代码，它可以正常工作

【问题讨论】：

标签： javascript html angular angular5 anchor-scroll

【解决方案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，基于最接近滚动元素的位置。

【讨论】：

我尝试了你的建议，但没有任何效果
您可以尝试将元素实例化为 ViewChild，然后在其 .nativeElement 上执行 .scrollIntoView() 吗？即@ViewChild('assegnazioneContatto') assegnazioneDiv(): ElementRef; (...) ngOnInit() { this.assegnazioneDiv.nativeElement.scrollIntoView({block:'start'}); }

【解决方案2】：

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

【讨论】：

我试过tabindex="1" 没用。在尝试window.document.getElementById(this.fragment).focus({ preventScroll: false }) 时，我给出了这个错误“预期为 0 个参数，但得到了 1 个。”
在我的代码中我不使用窗口，只使用文档。不知道为什么会出错？ .focus() 方法可以接受参数
如果我在控制台中运行代码也适用于文档。我不知道为什么给我这个错误