Web 应用程序缺少滚动条且无法滚动

Question

当页面上的项目超出视图时，我的 Angular 应用程序中的垂直滚动条不会出现。滚动条就在那里，我不记得在它丢失之前进行了任何更改。我已经坚持了好几天了。我检查了关于 SO 提出的类似问题的前 6 页，在实施所有建议后，滚动条没有重新出现。我也用谷歌搜索了答案，但再一次，没有一个建议让它重新出现。我尝试过的事情：

• 逐一注释掉所有 CSS 样式表，看看是不是其中一个导致了问题
• 逐个注释掉所有 HTML 文件，看看是不是其中一个导致了问题
• 将“溢出：自动”添加到全局样式、使用 * CSS 选择器的应用程序中的所有其他样式表以及 item-list-container（见下文）
• 将“overflow-y:scroll”添加到上面详述的相同位置（这会强制显示滚动条，但页面仍然不滚动）
• 确保任何样式表上都没有“溢出：隐藏”样式

这是应用程序的图片（滚动条应该在右侧）：

这是主要的全局 style.css 文件：

::-webkit-scrollbar {
    width: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 10px;
  }

这是上图中显示的组件的样式表：

ul {
    margin:0 10px 0 0;
    padding:0;   
}

li { list-style: none; }

.item-list-container {
    column-count: 4;
    column-gap: 1.1em;
    margin-top: 107px;   
}

.like-icon {
    color: red;
    position: absolute;
    bottom: 420px;
}

这是上图中组件的 html：

<ul class="container">
    <li class="item-list-container oneSec">
        <app-image-item
          *ngFor="let imageEl of galleryList"
          [image]="imageEl"
          (click)="onImageSelect(imageEl)">
          <div *ngIf="isLoggedIn" class="like-container">
            <ion-icon class="like-icon" name="heart"></ion-icon>
        </div> 
        </app-image-item>
    </li>
</ul>

在我把电脑扔出窗外之前，有人有什么建议吗？

Answer 1

进入样式 css。

body {
  height: 100vh;
  width: 100vw;
  overflow: auto;
}

或者在你的容器中使用溢出属性。