Question

通过单击按钮，div应该弹出并可滚动。当我向下滚动时，div在中间是静止的。我已经改变了css的位置：固定，仍然没有运气。帮我设置div可滚动。

<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
    <div class="cancel" onclick="closePopup();"></div>
</div>

<style>
.popup{
    position:fixed;
    top:0px;
    left:0px;
    margin:0px;
    width: 1250px;
    height: 750px;
    font-family:verdana;
    font-size:13px;
    padding:2px;
    background-color:white;
    border:2px solid grey;
    z-index:100000000000000000;
    display:none;
    opacity:0.6;
    filter:alpha(opacity=60); 
    }

.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
    }   
.cancel:hover{
    background:rgb(255,50,50);
    }
</style>

<script>
function openPopup() {
    document.getElementById('test').style.display = 'block';
}
function closePopup() {
    document.getElementById('test').style.display = 'none';
}    
</script>

Answer 1

使用这个：

<div class="popup" style="overflow: auto;">

或者在CSS文件中：

.popup {
   overflow: auto;
}

如果内容溢出，auto属性中的值overflow将显示滚动条。如果使用scroll值，它将显示滚动条，即使元素的内容没有溢出。

Answer 2

使用： -

.popup{ overflow:scroll; }

Answer 3

试试这个：

<html>
<body>
<button onClick="openPopup();">click here</button>
<div id="test" class="popup" style="overflow: scroll;">
    <div class="cancel" onclick="closePopup();"></div>
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br />
</div>
<style>
.popup{
    top:0px;
    left:0px;
    margin:0px;
    width: 500px;
    height: 500px;
    font-family:verdana;
    font-size:13px;
    padding:2px;
    background-color:white;
    border:2px solid grey;
    z-index:100000000000000000;
    display:none;
    opacity:0.6;
    filter:alpha(opacity=60); 
    }

.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
}   
.cancel:hover{
    background:rgb(255,50,50);
}
</style>

<script type="text/javascript">
function openPopup() {
    document.getElementById('test').style.display = 'block';
}
function closePopup() {
    document.getElementById('test').style.display = 'none';
}    
</script>
</body>
</html>

希望这有帮助。

Answer 4

以下是fiddle：

我想你在滚动页面时想要修复div。我改变了弹出窗口的高度和高度宽度。只是为了测试增加身体的高度。你可以删除它。

.popup{
  position: fixed;
  top: 100px;
  left: 100px;
  margin: 0px;
  width: 100px;
  height: 100px;
  font-family: verdana;
  font-size: 13px;
  padding: 2px;
  background-color: white;
  border: 2px solid grey;
  z-index: 100000000000000000;
  display: none;
  opacity: 0.6;
  filter: alpha(opacity=60);
}

body {
  height: 1000px;
}

如何使div可滚动

4 个答案: