非Bootstrap环境下，如何解决模态窗口内容溢出无法滚动问题？

你的问题核心在于模态框没有高度限制，再加上禁止背景滚动的设置，导致内容溢出时无法触发内部滚动。以下是具体问题分析和修复方案：

问题根源 #

1. #modal-content 设置了 height: auto，没有限制最大高度。当内容过多时，模态框会被内容完全撑高，超出视口范围，但因为你给页面主体添加了overflow: hidden禁止背景滚动，整个页面无法滚动，模态框本身也没有滚动触发的条件。
2. 使用负margin的居中方式，在模态框高度超出视口时，会导致部分内容被视口顶部/底部截断，进一步加剧滚动问题。

修改后的CSS代码 #

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-background-color);
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: var(--modal-content-background-color);
    overflow: auto;
    border-radius: 10px;
    color: var(--modal-font-color);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    /* 限制最大高度为视口的80%，留出上下边距 */
    max-height: 80vh;
    /* 适配不同屏幕的宽度设置 */
    width: 90%;
    max-width: 320px;
    left: 50%;
    /* 用transform替代负margin，实现自适应居中 */
    transform: translate(-50%, -50%);
    padding: 10px;
    position: fixed;
    top: 50%;
    z-index: 1000;
}

关键修改说明 #

• 添加max-height: 80vh：限制模态框最大高度为视口高度的80%，当内容超出这个高度时，overflow: auto会自动触发内部滚动条。
• 用transform: translate(-50%, -50%)替代负margin居中：无论模态框高度如何变化，都能保持在视口正中央，避免内容被视口截断。
• 设置宽度范围：width: 90%和max-width: 320px确保模态框在小屏和大屏下都有合适的显示宽度。

关于背景滚动的补充 #

确保你禁止背景滚动的代码仅作用于页面主体，不要影响模态框：

// 打开模态框时
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';

// 关闭模态框时
document.body.style.overflow = '';
document.documentElement.style.overflow = '';

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