我使用的是angular5。我有一个仪表板,其中的几个部分内容很少,而几个部分内容太大,以至于在转到顶部时更改路由器时都遇到了问题。每次我需要滚动到顶部时。谁能帮助我解决此问题,以便当我更换路由器时,我的看法始终停留在顶部。
提前致谢。
有一些解决方案,请确保将其全部检查:)
activate
每当实例化一个新组件时,路由器插座都会发出该事件,因此我们可以(activate)
用来滚动(例如)到顶部:
app.component.html
<router-outlet (activate)="onActivate($event)" ></router-outlet>
app.component.ts
onActivate(event) {
window.scroll(0,0);
//or document.body.scrollTop = 0;
//or document.querySelector('body').scrollTo(0,0)
...
}
或使用此答案来平滑滚动
onActivate(event) {
let scrollToTop = window.setInterval(() => {
let pos = window.pageYOffset;
if (pos > 0) {
window.scrollTo(0, pos - 20); // how far to scroll on each step
} else {
window.clearInterval(scrollToTop);
}
}, 16);
}
如果希望有所选择,说不是每个组件都应触发滚动,则可以检查一下:
onActivate(e) {
if (e.constructor.name)==="login"{ // for example
window.scroll(0,0);
}
}
{ scrollPositionRestoration: 'enabled' }
在热切加载的模块上使用,它将应用于所有路由:
RouterModule.forRoot(appRoutes, { scrollPositionRestoration: 'enabled' })
它还将进行平滑滚动。但是,这在每个路由上都存在不便。
query(':enter, :leave', style({ position: 'fixed' }), { optional: true }),
它的工作。感谢您的回答。你为我节省了很多时间
window
对象上的滚动事件在角度5中不起作用。有什么猜测吗?@SahilBabbar,检查身体CSS,是否溢出:隐藏?它的高度是多少?
一个真正的英雄。节省了无聊的时间。谢谢!
@AnjanaSilva,谢谢您的正面评价!我很高兴它可以为您提供帮助:)