각도 공동 템플릿에서 중복 된 스크롤바를 제거하는 방법은 무엇입니까?

Question

저는 Angular 4에 초보자입니다. 저는 AngularJS와 함께 몇 가지 프로젝트를 만들었습니다.

나는 프론트 엔드 구조를 구축하고 카탈로그 웹 응용 프로그램의 메뉴 콘텐츠 및 카드 목록을 구축에 초점을 테라 데이타 공유 결합 프레임 워크을 사용하기 시작했습니다.

당신이 볼 수 있듯이, 문제는 페이지 오른쪽에서 두 스크롤입니다 :

는 당신이 아래 이미지에서 볼 수 https://stackblitz.com/edit/covalent-dashboard-ynyp1w?file=main.ts이 전체 템플릿을 다운로드했습니다. 회색 도구 모음을 방해하지 않기 때문에 내부 스크롤 만 존재해야한다고 생각합니다.

이 템플릿으로 이미 작업했거나 CSS에 능숙한 사람이라면 사이트에서이 추가 스크롤 막대를 제거하는 방법을 알려줄 수 있습니까? 그리고 (보너스) Facebook의 새로운 마른 스크롤바에 대해 이전 스크롤 막대 스타일을 어떻게 대체 할 수 있습니까?

Answer 1

의 CSS 클래스에 overflow:hidden;를 추가합니다. 당신은 그것의 외부에 <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> 

Answer 2

다만 문제는 페이지 콘텐츠가 <mat-sidenav-container flex> 요소에 싸여되고 있음을 인 내부 컨텐츠