How to make the div scrollable
Question
By clicking the button, the div should be popup and scrollable. The div just static in middle when I scroll down. I have changed the css position:fixed, still no luck. Help me to make the div scrollable.
<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>
4 answers
solution1
2 ACCPTED 2013-06-18 05:53:13
Use this one:
<div class="popup" style="overflow: auto;">
Or alternatively in CSS file:
.popup {
overflow: auto;
}
The value auto in the overflow property will show a scroll bar if the content is overflowed. If you use the scroll value, it will show the scroll bar even the content of the element is not overflowing.
solution2
1 2013-06-18 05:48:58
用这个：-
.popup{ overflow:scroll; }
solution3
0 2013-06-18 05:55:57
Try this:
<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>
Hope this helps.
solution4
0
Here is the fiddle :
I think you wanted the div to be fixed, when you scroll the page. I have changed the popup's height & width. Just for the sake of testing added height to body. You can remove it.
.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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.