如何删除 Angular 共价模板中的重复滚动条？

Question

我是 Angular 的超级新手 4. 我只用 AngularJS 创建了几个项目。

我开始使用 Teradata Covalent Framework 来构建前端结构，并专注于为 Catalog Web App 构建菜单内容和卡片列表。

我在 https://stackblitz.com/edit/covalent-dashboard-ynyp1w?file=main.ts 下载了这个完整的模板，您可以在下图中看到它：

如您所见，问题出在页面右侧的那两个滚动条上。我认为那里应该只有内部滚动条存在，因为它不会干扰灰色工具栏。

<td-layout>
  <td-navigation-drawer flex [sidenavTitle]="name" logo="assets:covalent">
    Top level navigation drawer
  </td-navigation-drawer>
  <td-layout-nav [toolbarTitle]="(media.registerQuery('gt-xs') | async) ? 'Dashboard' : ''" logo="assets:covalent" navigationRoute="/">
    <button mat-icon-button td-menu-button tdLayoutToggle>
      <mat-icon>menu</mat-icon>
    </button>
    <div td-toolbar-content>
      Top toolbar
    </div>
    <td-layout-manage-list #manageList>
      <div td-sidenav-content layout="column" layout-fill>
        Inner sidenav listing dashboards
      </div>

      <mat-sidenav-container flex>
        <mat-sidenav #sidenav align="end">
          Right Sidenav
        </mat-sidenav>
        <td-layout-nav>
          <div td-toolbar-content>
            Second toolbar
          </div>

          <div flex layout-gt-sm="row">
            <div flex-gt-sm="50">
              <mat-card>
                ...
              </mat-card>
            </div>
          </div>

        </td-layout-nav>
      </mat-sidenav-container>
    </td-layout-manage-list>
    <td-layout-footer>Footer content</td-layout-footer>
  </td-layout-nav>
</td-layout>

任何已经使用过此模板或非常擅长 CSS 的人都可以告诉我如何从站点中删除这个 creep extra 滚动条？并且（Bonus）我怎样才能用 Facebook 的那些新的瘦滚动条替换那些旧的滚动条样式？

Answer 1

只需要将overflow:hidden;添加到css class的内部内容

Answer 2

问题是您的页面内容被包裹在 <mat-sidenav-container flex> 元素中。你会想要在它之外使用 <td-layout-nav> 元素。

我已修复 this stackblitz 中的页面。下面是代码的简化版本。

<td-layout>
  <td-navigation-drawer flex [sidenavTitle]="name" logo="assets:covalent">
    Top level navigation drawer
  </td-navigation-drawer>
  <td-layout-nav [toolbarTitle]="(media.registerQuery('gt-xs') | async) ? 'Dashboard' : ''" logo="assets:covalent" navigationRoute="/">
    <button mat-icon-button td-menu-button tdLayoutToggle>
      <mat-icon>menu</mat-icon>
    </button>
    <div td-toolbar-content>
      Top toolbar
    </div>
    <td-layout-manage-list #manageList>
      <div td-sidenav-content layout="column" layout-fill>
        Inner sidenav listing dashboards
      </div>

      <td-layout-nav>
        <div td-toolbar-content>
          Second toolbar
        </div>

        <mat-sidenav-container flex>
          <mat-sidenav #sidenav align="end">
            Right Sidenav
          </mat-sidenav>
          <div flex layout-gt-sm="row">
            <div flex-gt-sm="50">
              <mat-card>
                ...
              </mat-card>
            </div>
          </div>

        </mat-sidenav-container>
      </td-layout-nav>
    </td-layout-manage-list>
    <td-layout-footer>Footer content</td-layout-footer>
  </td-layout-nav>
</td-layout>

如何删除 Angular 共价模板中的重复滚动条？

How to remove duplicated scrollbar in Angular Covalent templates?

scrollbar

angular

teradata-covalent