弹窗超出浏览器窗口时，如何让浏览器显示垂直滚动条？

问题出在你给弹窗设置了position: fixed，这种定位会让元素脱离文档流，不会撑开body的高度，所以即使弹窗内容超出视口，浏览器也不会出现滚动条。要实现浏览器窗口显示滚动条，有两种可行方案：

方案一：让弹窗进入文档流（跟随页面滚动） #

这种方案下，弹窗会成为页面内容的一部分，内容过长时自动撑开body高度，浏览器自然出现滚动条。

修改.popup .popuptext的CSS：

.popup .popuptext {
  visibility: hidden;
  width: 600px;
  background-color: #555;
  color: #000000;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: static; /* 替换fixed为static */
  margin: 200px auto 40px; /* 顶部200px，底部留间距，水平居中 */
  z-index: 1;
  height: auto;
}

修改后，弹窗会在页面中水平居中，距离顶部200px，滚动页面就能查看超出视口的弹窗内容。

方案二：保留弹窗固定定位，动态设置body最小高度 #

如果希望弹窗保持固定在视口的位置，通过JavaScript计算弹窗高度，动态设置body的最小高度，强制浏览器出现滚动条。

修改CSS #

给body添加默认最小高度：

body {
  font: 16px Arial;
  min-height: 100vh; /* 确保默认高度至少覆盖视口 */
}

修改JavaScript #

更新弹窗显示和隐藏的函数：

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.onclick = "";
  if(!popup.classList.contains("show")){
    popup.classList.toggle("show");
    // 计算弹窗底部位置，设置body最小高度
    const popupStyle = window.getComputedStyle(popup);
    const popupTop = parseInt(popupStyle.top);
    const popupHeight = popup.offsetHeight;
    // 给底部留20px间距
    document.body.style.minHeight = (popupTop + popupHeight + 20) + 'px';
  }

  if(this.id == 5)
    popup.classList.toggle("show");
}

function myclose() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
  // 恢复body默认高度
  document.body.style.minHeight = '';
}

这种方案下，弹窗仍固定在视口位置，当弹窗内容超出视口时，body会被撑开至足够高度，浏览器出现滚动条，滚动页面就能看到弹窗底部内容。

完整修改后的代码（方案一示例） #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .popup {
        position: relative;
        display: inline-block;
    }

    .popup .popuptext {
        visibility: hidden;
        width: 600px;
        background-color: #555;
        color: #000000;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: static;
        margin: 200px auto 40px;
        z-index: 1;
        height: auto; 
    }

    .popup .show {
        visibility: visible;
    }

    * { box-sizing: border-box; }
    body {
        font: 16px Arial;
        text-align:center;
    }

    .button_add_name {
        display:block;
        margin-right:50%;
        margin-left:50%;
        margin-bottom:1%;
    }

    .button_add_tag {
        margin-bottom:1%;
    }
</style>
</head>
<body>
    <h2>Popup</h2>
    <div class="popup" >
        <button type="button" id = "5" onclick="myFunction()">Add Tag</button>
        <span class="popuptext" id="myPopup">
            <button type="button" class = "button_add_name" id = "6">TAG</button>
            <button class = "button_add_tag" style="background-color: #f44336" type="button" id = "5" onclick="myclose()">Add</button>
        </span>
    </div>

    <div> This is main text</div>
    <script>
        function myFunction() {
            var popup = document.getElementById("myPopup");
            popup.onclick = "";
            if(!popup.classList.contains("show"))
                popup.classList.toggle("show");

            if(this.id == 5)
                popup.classList.toggle("show");
        }
        
        function myclose() {
            var popup = document.getElementById("myPopup");
            popup.classList.toggle("show");
        }

        function add_items() {
            var b = document.getElementById("myPopup");
            for(i = 0;i<600;++i)
                b.innerHTML += "<button class = \"button_add_tag\" type=\"button\"  onclick=\"myclose()\">JS</button>";
        }

        add_items();
    </script>
</body>
</html>

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