Question

这应该是非常简单的，我在我的组件模板中有一个元素，我希望在页面完成加载后顺利向下滚动它，如果它作为像这样的片段在url中传递：{{1 }}

我试图通过在html中为元素添加SELECT coalesce(t1.col1,t2.col1) as Col1, coalesce(t1.col2, t2.col2) as Col2然后使用

来实现

'../componentPath#someElement'

然后像这样调用#someElement：

@ViewChild('someElement') someElement: ElementRef

但是没有任何反应，如果我在ngAfterViewInit()之后使用ngAfterViewInit() { this.route.fragment.subscribe((fragment: string) => { if (fragment === 'someElement') { this.someElement.nativeElement.scrollIntoView({behavior: 'smooth', block: 'start'}); } }); }这样调用scrollIntoView()就行得很好：

setTimeOut()

当然这是错误的，但它给我的结论是我的问题是触发scrollIntoView（）事件的时间。

我在许多网站上阅读了很多讨论，但还是无法让它正常工作，所以我认为在这里打开一个问题可能是一个好主意。

Answer 1

不确定你的问题是什么。如果你问为什么需要setTimeout，因为你需要在dom渲染结束时触发你的滚动。你也可以只使用setTimeout(()=>{...})而没有任何价值，它也可以

为了滚动的流畅性，您无法通过behaviour:smooth实现它，因为它只受Mozilla浏览器的支持！

遗憾的是，你不能用angular2来实现这个目标。

我使用离子，它们的内容具有非常好的.scrollTo功能。

@ViewChild(Content) content: Content;
public scrollToResults() {
 setTimeout(() => {
   let element = document.getElementById('myElement');
   //1000 is the scroll time it self, 1s:
   this.content.scrollTo(0, element.offsetTop, 1000);
 })
}

如果你不使用离子，你可以重现他们如何完成它https://github.com/ionic-team/ionic/blob/master/src/util/scroll-view.ts

如果您不使用离子，我认为它不值得输入离子。也许只导入ionic-angular就足够了，您不需要导入所有内容。

如何平滑向下滚动到页面上的元素加载角度4？

1 个答案: