为下拉菜单（Dropdown Menu）添加滚动条的实现咨询

问题说明 #

下拉菜单包含大量选项时会超出屏幕底部，添加overflow-y: scroll后未生效，菜单底部被截断，需要实现可滚动的下拉菜单。

原因分析 #

overflow-y: scroll仅在容器设置固定高度或最大高度时才会触发滚动效果，当前代码中.usermenudropdown仅定义了宽度和定位，未限制高度，导致滚动条无法生效。

解决步骤 #

1. 给.usermenudropdown设置最大高度，推荐用视口高度单位适配不同屏幕：

   .usermenudropdown {
     overflow-y: auto; /* 内容超出时才显示滚动条，比scroll更友好 */
     position: fixed;
     width: 339px;
     top: 50px;
     max-height: calc(100vh - 70px); /* 减去top的50px，预留20px边距避免贴屏幕底部 */
     padding-right: 8px; /* 避免滚动条遮挡内容 */
   }
   

2. 检查父元素.dropdown-menu样式，确保它没有限制子元素滚动的设置：

   .dropdown-menu {
     overflow: visible; /* 解除对滚动空间的限制 */
     /* 移除可能存在的height/max-height固定值 */
   }
   

3. 若无需全局隐藏页面滚动，可删除body { overflow: hidden; }，避免影响页面其他区域。

完整代码示例 #

CSS #

.usermenudropdown {
  overflow-y: auto;
  position: fixed;
  width: 339px;
  top: 50px;
  max-height: calc(100vh - 70px);
  padding-right: 8px;
}

.dropdown-menu {
  overflow: visible;
}

HTML #

<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right shadow" aria-labelledby="notification24">
  <div class="usermenudropdown">
    <ul class="list-group">
      <li class="list-group-item list-group-item-action d-flex" *ngFor="let currentUpload of currentUploads" (click)="fixTask(currentUpload)">
        <div class="mr-2" data-cy="pendingUpload" *ngIf="currentUpload.status === 'pending' && currentUpload.type !== 'replicate'">
          <img src="assets/images/icons8-clock-24.png" alt="fix">
        </div>
        <div class="mr-2 rotating" data-cy="uploadingUpload" *ngIf="currentUpload.status === 'processing' || (currentUpload.type === 'replicate' && currentUpload.status !== 'failed')">
          <img src="assets/images/icons8-refresh-24.png" alt="fix">
        </div>
        <div class="mr-2" data-cy="erroredUpload" *ngIf="currentUpload.status === 'failed'">
          <img src="assets/images/icons8-cancel-24.png" alt="fix">
        </div>
        <span class="text-truncate mr-auto my-auto">{{currentUpload.name}}</span>
        <a data-cy="openUploadLink" class="btn text-primary my-auto p-0" style="cursor:pointer;" *ngIf="currentUpload.status === 'failed' || currentUpload.type === 'replicate'">
              {{'schedule_notification_link_open' | translate}}
            </a>
        <button *ngIf="currentUpload.status === 'failed' || currentUpload.type === 'replicate'" type="button" aria-label="Close" data-cy="removeUpload" class="close ml-2" (click)="removeTask(currentUpload)">
              <span aria-hidden="true">&times;</span>
            </button>
      </li>
      <li class="list-group-item list-group-item-action d-flex" *ngIf="!erroredUploads?.length && !currentUploads?.length">
        {{ 'no_notifications' | translate }}
      </li>
    </ul>
  </div>
</div>

效果演示 #

内容的提问来源于stack exchange，提问作者fritz6