设置overflow:auto或scroll实现模态框滚动，滚动条显示但无法滚动怎么办？

常见原因及对应解决方法 #

• 上层元素存在阻止滚动的事件监听
  排查全局JS代码中是否绑定了mousewheel、touchmove、scroll事件到document、body或模态框的父级元素上，且做了e.preventDefault()的处理。这类代码通常用来禁止页面背景滚动，容易误拦截模态框的滚动事件，移除不必要的默认行为阻止即可。
• 层级更高的元素遮挡了滚动区域
  如果模态框上层存在z-index更高的透明遮罩层/其他元素，会捕获所有鼠标交互事件，导致你无法触发滚动条的拖动、滚轮操作。可以给.registerpop设置更高的层级：

.registerpop {
    z-index: 999; /* 数值可以根据实际项目的层级规则调整 */
}

• 子元素脱离文档流导致滚动高度计算异常
  你设置了overflow-y: scroll会强制显示滚动条，哪怕实际没有超出高度的可滚动内容。如果模态框内的子元素使用了position: fixed/position: absolute脱离了正常文档流，父容器无法识别到这部分内容的高度，就会出现滚动条显示但无内容可滚的情况。调整子元素的定位方式，或者给父容器设置对应的内边距/高度，确保超出容器的内容能被正常识别。
• 元素的交互属性被禁用
  检查.registerpop本身或它的父级元素是否设置了pointer-events: none，该属性会禁用所有鼠标交互。给目标元素单独开启交互即可：

.registerpop {
    pointer-events: auto;
}

• 样式规则冲突
  你当前的代码用了!important强制覆盖属性，可能和其他样式规则产生冲突，同时部分低版本浏览器对vh单位和relative定位组合的滚动支持有异常。可以调整样式写法：

.registerpop {
    position: relative;
    width: 35vw;
    max-height: 80vh; /* 用max-height替代固定height更符合模态框的交互逻辑 */
    overflow-y: auto; /* 内容超出才显示滚动条，避免无内容时显示空滚动条 */
    background-color: #f7f7f7;
    z-index: 999;
    pointer-events: auto;
}

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