Question

RouterModule锚定滚动基于视口可滚动区域，因为mat-sidenav-container与fullscreen属性一起使用时将自己设置为100％高度，因此{{1 }}进行更改。

RouterModule

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

<mat-sidenav-container fullscreen> <mat-sidenav-content></mat-sidenav-content> </mat-sidenav-content>是否可以使用RouterModule而不是视口作为滚动容器引用？

请参见StackBlitz Example。参见working version without fullscreen。

Answer 1

是否有针对此的mat-sidenav-content解决方案？作为一种解决方法，我正在订阅路由器事件并查看Scroll.anchor，然后按照 Using anchor link #id in Angular 6 我可以影响子视图上的平滑滚动...

例如。

在html中：

  <a routerLink="/menu" fragment="pizza">Pizza</a>
  ...
  <div #pizza>...</div>

在组件中：

    @ViewChild( 'pizza' ) pizza: ElementRef

    this.router.events.subscribe( (e:RouterEvent) => {
        if ( e instanceof Scroll ) {
          if ( e.anchor ==== 'pizza' ) {
            this.pizza.nativeElement.scrollIntoView( ... );
          }
        }
    } );

Answer 2

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

对于mat-side-nav-container，我将'min-height'设置为100％，而不是设置'height'，以便可滚动元素是主体，而不是sidenav容器，但如果如果内容小于视口，则容器仍将拉伸以覆盖它。请记住，这可能会影响您的布局，具体取决于您的实现，但这对于该解决方案的正常工作是绝对必要的。
mat-toolbar的高度（在mat-sidenav-container上方）是64px，我为要滚动的元素保留的边距是16px，因此（64 + 16）是y-offset
在app.module.ts中，NgModule的内部导入

df = df.join(pd.DataFrame(df["Number"].astype(str).str.findall("..").values.tolist()).add_prefix('DIV')).fillna("00")

假设mat-sidenav-container位于app.component.html中，我将以下内容添加到ngOnInit（）中的app.component.ts中。（尽管这是应用程序组件，但请记住要采取预防措施以防止由于订阅而导致的内存泄漏，所以这并不重要）

RouterModule.forRoot(
      routes,
      {
        anchorScrolling: 'enabled',
        scrollOffset: [0, 64 + 16]
      }),

其他改进：

代替对y-offset进行硬编码-可以查询mat-toobar的clientHeight和要滚动到的元素的clientTop，然后将它们相加以获得偏移量
我只测试了滚动到mat-sidenav-content的直接后代的元素。也许可以将此逻辑扩展为适用于嵌套元素，嵌套路线等等等

路由器锚定滚动不适用于Material的mat-sidenav-container [全屏]

2 个答案: