angular - 粘性标题没有事件使用 Angular 在内容上滚动

Question

我正在尝试使用 Angular Material 设置两个粘性 div(一个标题，一个 sidenav)。当我向下滚动到我的内容时，粘性 div 可以工作，除了滚动事件。

当我向下滚动时，我有这样的东西:

我的问题是:当我向下滚动时，我没有任何来自 Angular 的滚动事件。如果我通过为 height css 属性设置一个值来更改 style.scss 文件，所有粘性 div 都不再起作用但是我有来自 Angular 的滚动事件。

这让我很紧张:(有解决这个问题的想法吗？非常感谢!

样式.scss

html, body { 
    min-height: auto; // sticky header doesn't work but scroll event Angular OK
    // height: 100%; // sticky header works but scroll event Angular NOK
}

body { 
    margin: 0; 
    font-family: Roboto, "Helvetica Neue", sans-serif; 
}

粘性 header 代码:

app.component.html

<div class="app-wrapper">
    <router-outlet></router-outlet>
</div>

应用程序组件.scss

.app-wrapper {
    min-height: 100%;
    overflow-x: hidden;
}

.my-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
}

app-main.component.html

<mat-toolbar color="primary" class="my-toolbar">
    <mat-toolbar-row>
        <div fxFlex fxLayoutAlign="flex-start">
            <mat-icon routerLink="/home">home</mat-icon>
        </div>
        <h1>My title</h1>
    </mat-toolbar-row>
</mat-toolbar>

<router-outlet></router-outlet>

app-main.scss

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
}

粘性菜单

应用内容.html

<div fxLayout="column">
    <img fxFlex="10" src="assets/test.jpg"  alt="menu picture" />

    <div class="categories nav-menu color-primary">
        <app-horizontal-nav
            [navItems]="categories$ | async">
        </app-horizontal-nav>
    </div>

   <!-- content -->
   <app-products></app-products>
</div>

应用内容.scss

.nav-menu {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 50px; // for the first sticky header
}

编辑:

这里有一个 stackblitz 演示:https://stackblitz.com/edit/angular-9-0-0-rc-1-zhoy51在 style.scss 中，将高度从自动更改为 100% 并且粘性标题将起作用。但是没有触发 scrolledToDirective 的滚动事件。

Answer 1

您的主包装器具有以下规则:

.app-wrapper {
    height: 100%; // doesn't have any effect since parent's(app-root) height is 0 
    overflow-x: hidden; <== remove this
}

将 100% 设置为正文后，滚动到该包装器。

您应该删除 overflow-x: hidden; 它应该可以工作。但是水平滚动还是会有一个小问题，是 Material mat-chip-list引起的，所以在里面加上overflow: hidden:

.nav-menu {
    ...
    overflow: hidden;  <==== this one
}

Forked Stackblitz