ul元素滚动异常求助：鼠标悬停滚动失效、滚动跳转页面滚动

问题现象 #

1. 鼠标悬停在UL元素上时，仅能通过拖动右侧滚动按钮触发滚动，鼠标滚轮无效
2. 列表滚动至顶部或底部时，会自动切换为页面整体滚动（组件无父子嵌套滚动元素）

解决方案 #

1. 修复鼠标滚轮无法触发滚动的问题

给UL元素添加pointer-events: auto，确保它能正常接收鼠标滚轮事件：

• 部分场景下父元素可能被意外设置了pointer-events: none，导致UL无法获取鼠标事件，显式声明该属性可以覆盖继承的异常设置

2. 阻止滚动溢出到页面

添加overscroll-behavior-y: contain属性，该属性会限制滚动行为仅在UL内部生效，不会在滚动到边界时触发页面滚动

修改后的CSS代码 #

.city-options ul{
  list-style-type: none;
  padding-left: 0;
  height: 200px;  /* 固定高度 */
  overflow-y: auto;  /* 内容溢出时显示滚动条 */
  pointer-events: auto; /* 确保UL能接收鼠标滚轮事件 */
  overscroll-behavior-y: contain; /* 阻止滚动溢出到页面 */
}

额外排查点 #

如果问题仍存在，检查以下内容：

• 父容器.city-options或form是否设置了overflow相关属性，干扰了UL的滚动上下文
• 全局JS事件监听或Angular组件（如matInput）是否存在阻止滚轮事件的逻辑

原问题代码 #

HTML

<div class="city-options" *ngIf="isCityToggled">
  <form>
    <div class="city-field d-flex mb-3">
      <i class="fa-solid fa-magnifying-glass mr-2"></i>
      <input type="text" class="custom-input" placeholder="Введіть населений пункт" matInput [formControl]="cityControl">
    </div>
    <ul>
      <li *ngFor="let city of (filteredCityNames | async)" (click)="selectCity(city)">{{city}}</li>
    </ul>
  </form>
</div>

原CSS

.city-options ul{
  list-style-type: none;
  padding-left: 0;
  height: 200px;  /* Set a fixed height */
  overflow-y: auto;  /* Add a scrollbar when the content overflows the height */
}

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