如何强制 div 始终可滚动？

Posted 2023-03-06

【中文标题】如何强制 div 始终可滚动？

【英文标题】：How to force a div to always be scrollable?

【发布时间】：2018-06-03 06:38:37

【问题描述】：

我正在使用Angular 4 和Bootstrap 4 (alpha 6)。我正在使用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" >
          </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;

【问题讨论】：

你有没有尝试在溢出中设置!important？

【参考方案1】：

尝试以正确的顺序设置样式并使用100vh 而不是百分比值。这是一个例子：

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


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

在我的项目中，我使用angular2-virtual-scroll 并具有类似的代码构造。