下面是我的测试代码
https://jsfiddle.net/wo58xseb/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
.popup {
position: relative;
display: inline-block;
}
.popup .popuptext {
left:50%;
top:200px;
margin-left:-300px;
visibility: hidden;
width: 600px;
background-color: #555;
color: #000000;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: fixed;
z-index: 1;
height: auto;
}
.popup .show {
visibility: visible;
}
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.button_add_name
{
display:block;
margin-right:50%;
margin-left:50%;
margin-bottom:1%;
}
.button_add_tag
{
margin-bottom:1%;
}
</style>
</head>
<body style="text-align:center">
<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>
// When the user clicks on div, open the popup
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>我创建了一个简单的弹出窗口（div）当按钮被按下。然后我用java脚本填充按钮。问题是当弹出窗口太大时，浏览器窗口不显示垂直滚动条。弹出窗口位于窗口下方，底部内容被隐藏。我搜索了互联网，但大多数都描述了如何在弹出窗口中添加滚动条。我不想这样。我需要一个垂直滚动条在浏览器窗口弹出时，div到外面的浏览器窗口。我该怎么做？
x一个一个一个一个x一个一个二个一个x一个一个三个一个
1条答案
按热度按时间vsdwdz231#
除了在弹出窗口中放置滚动条之外，还可以让弹出窗口作为一个整体自行滚动。材质UI的这些示例很好地显示了不同之处
HTML
作为一个一般性的想法实现这一点需要以下html结构：
CSS
然后，背景被给定为
position: fixed，滚动条被给定为height: 100%; overflow: hidden auto;，并且内容被给定为position: relative; overflow-y: auto;CSS和JS
最后，弹出窗口在未打开时应该为
display: none，而在打开时，主体应该切换为overflow: hidden，以便用户在对话框打开时无法继续滚动主体。抛光
添加更多的美学风格和JavaScript来处理打开和关闭对话框，我们得到了这个概念的证明...
CodeSandox