如何使div可滾動

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;
}

如果內容溢出，則overflow屬性中的值auto將顯示滾動條。 如果使用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

這是小提琴：

我認為您希望在滾動頁面時固定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 個解決方案

解決方案1
2 已采納 2013-06-18 05:53:13

解決方案2
1 2013-06-18 05:48:58

解決方案3
0 2013-06-18 05:55:57

解決方案4
0

如何使div可滾動

問題描述

4 個解決方案

解決方案1 2 已采納 2013-06-18 05:53:13

解決方案2 1 2013-06-18 05:48:58

解決方案3 0 2013-06-18 05:55:57

解決方案4 0

解決方案1
2 已采納 2013-06-18 05:53:13

解決方案2
1 2013-06-18 05:48:58

解決方案3
0 2013-06-18 05:55:57

解決方案4
0