使用<dialog popover>实现页面滚动模态框及滚动异常解决

问题原因 #

你看到的滚动条其实是<dialog>（.modal）元素的，并非.modal-content的。当前你给.modal设置了max-height:90vh和overflow-y:auto，这会强制限制dialog的高度，当内部内容超出这个高度时，就会在dialog内部触发滚动。而.modal-content的overflow-y:hidden没起作用，是因为它的高度由子元素完全撑起来，没有被限制高度，自然不会出现自身的滚动条。

解决方案 #

要让滚动条出现在页面而非dialog中，调整CSS如下：

.modal {
  /* 移除限制高度和内部滚动的属性，让dialog高度自适应内容 */
  max-height: unset;
  overflow-y: visible;
  /* 可选：重置dialog默认样式，让外观更接近Bootstrap模态框 */
  border: none;
  padding: 0;
  background: transparent;
}

.modal-content {
  background-color: #ccc;
  padding: 1rem; /* 可选：添加内边距优化内容展示 */
  margin: 0;
}

原理说明 #

• 移除max-height并设置overflow-y: visible后，dialog的高度会完全由内部内容撑开，不会被视口高度限制。
• 当内容高度超过视口时，浏览器会自动在页面层级显示滚动条，而非在dialog内部触发滚动。

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