div를 항상 스크롤 가능하게 만드는 방법?

Question

과 함께 Angular 4을 사용하고 있습니다. 내가 ngx-infinte-scroll을 사용하고 있기 때문에 사용자가 div의 상단이나 하단으로 스크롤 할 때 서버에서 데이터를 가져올 수 있습니다. 문제는 사용자가 항목이 충분할 때만 스크롤 할 수 있다는 것입니다. 나는 그들이 항상 스크롤 할 수 있도록 그것을 만들고 싶다. 세로 스크롤 막대가 항상 표시되도록하려면 어떻게해야합니까? 스크롤 할 필요가 컨텐츠는 item-scroller 클래스

<div class="col-md-9 chat-column"> 
    <div class="card h-100"> 
    <div class="card-block item-body"> 
     <h4 class="card-title center">Test</h4> 
     <hr/> 
     <div class="item-scroll" 
      infinite-scroll 
      [infiniteScrollDistance]="0.99" 
      [infiniteScrollUpDistance]="0.075" 
      [infiniteScrollThrottle]="10" 
      [scrollWindow]="false" 
      (scrolled)="onScrolledDown()" 
      (scrolledUp)="onScrolledUp()" 
     > 
     <div *ngFor="let i of is"> 
      {{i}} 
     <div class="answer left"> 
      <div class="avatar"> 
      <img [src]="i.imageURL" alt=""> 
      </div> 
      <div class="name">{{i.name}}</div> 
      <div class="text"> 
      {{i.text}} 
      </div> 
      <div class="when">{{i.when}}</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

CSS

.item-scroll { 
    /*overflow: scroll;*/ 
    overflow-y: scroll; 
    flex:none; 
} 

.item-body { 
    font-family: "Raleway", sans-serif; 
} 

내가 시도한 것

1)

.item-scroll { 
    height: 101% 
    overflow-y: scroll; 
    flex:none; 
} 

.item-body { 
    font-family: "Raleway", sans-serif; 
} 

2)

에

.item-scroll { 
    height: 101%; 
    overflow-y: scroll; 
    flex:none; 
} 

.item-body { 
    height: 100%; 
    font-family: "Raleway", sans-serif; 
} 

3)

.item-scroll { 
    height: 100%; 
    margin-bottom: 0 0 0 1px; 
    overflow-y: scroll; 
    flex:none; 
} 

.item-body { 
    font-family: "Raleway", sans-serif; 
} 

Answer 1

봅니다 올바른 순서로 당신의 스타일을 설정하고 백분율 값 대신 100vh를 사용합니다. 내가 angular2-virtual-scroll 사용하고 내 코드와 유사한 구조를 가지고 내 프로젝트에서

.item-body { 
    height: 100vh; 
    padding: 0; 
} 

.item-scroll { 
    display: block; 
    height: 100%; 
    width: 100%; 
} 

예를 들면 다음과 같습니다.