I am currently working with Angular 4 and Bootstrap 4 (alpha 6). I have implemented ngx-infinte-scroll to fetch data from the server when the user scrolls to the top or bottom of the div. The issue I am facing is that the user can only scroll when there are enough items to display. I want to enable scrolling at all times. How can I make sure that the vertical scroll bar is always visible? The content that needs to be scrollable is within the item-scroller class.
<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;
}
Attempts to Solve the Issue
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;
}