gpt4 book ai didi

angular - 路由器 anchorScrolling 不适用于 Material 的 mat-sidenav-container [全屏]

转载 作者:行者123 更新时间:2023-12-04 17:44:32 26 4
gpt4 key购买 nike

RouterModule anchor 滚动基于视口(viewport)可滚动区域,如mat-sidenav-container当与 fullscreen 属性一起使用时,将 ifself 设置为 100% 高度,RouterModule 不会改变视口(viewport)溢出。

<mat-sidenav-container fullscreen>
<mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-content>

在上面的示例中,所有可滚动内容都位于 mat-sidenav-content 中.

有没有办法让 RouterModule 使用 mat-sidenav-container 而不是视口(viewport)作为滚动容器引用?

参见 StackBlitz Example .查看working version without fullscreen .

最佳答案

我遇到了完全相同的问题。我通过以下方式解决了它:

  1. 对于 mat-side-nav-container,我没有设置“height”,而是将“min-height”设置为 100%,这样可滚动元素就是 body,而不是 sidenav 容器,但万一内容小于视口(viewport),容器仍会拉伸(stretch)以覆盖它。请记住,这可能会影响您的布局,具体取决于您的实现,但这对于此解决方案的工作来说是绝对必要的。
  2. mat-toolbar 的高度(在 mat-sidenav-container 上方)是 64px,我为滚动的元素保留的边距是 16px,因此 (64 + 16) 是 y 偏移
  3. 在 app.module.ts 中,NgModule 的内部导入
RouterModule.forRoot(
routes,
{
anchorScrolling: 'enabled',
scrollOffset: [0, 64 + 16]
}),
  1. 假设 mat-sidenav-container 位于 app.component.html 中,我将以下内容添加到 ngOnInit() 内的 app.component.ts 中。(请记住采取预防措施防止由于订阅而导致的内存泄漏,虽然这是应用程序组件,所以这并不重要)
this.router.events
.pipe(

//take only scroll events that have an anchor specified
filter(e => e instanceof Scroll && !!e.anchor),

//wait for the DOM to resolve. It worked with 10, but it was a small test case
//so I used 100 just in case
delay(100),

//take the element that the anchor points to
map((e: Scroll) => document.getElementById(e.anchor)),

//ignore if no element was found
filter(el => !!el)
)
.subscribe(el =>
document.scrollingElement
.scroll(
0,
window.scrollY + el.getBoundingClientRect().top - (64 + 16)
)));

其他改进:

  • 无需硬编码 y 偏移量 - 可以查询 mat-toobar 的 clientHeight 和滚动到的元素的 clientTop,并将它们相加以获得偏移量
  • 我只针对滚动到作为 mat-sidenav-content 直接后代的元素进行了测试。也许这个逻辑可以扩展到适用于嵌套元素、嵌套路由等等等等

关于angular - 路由器 anchorScrolling 不适用于 Material 的 mat-sidenav-container [全屏],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52725394/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com