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>

Jaime Gris · Accepted Answer · 2013-06-18 06:17:38Z

2

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.

edited Jun 18, 2013 at 6:17

answered Jun 18, 2013 at 5:53

Jaime Gris

1,1366 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vivek Sadh · Accepted Answer · 2013-06-18 05:48:58Z

1

Use this:-

.popup{ overflow:scroll; }

answered Jun 18, 2013 at 5:48

Vivek Sadh

4,2683 gold badges35 silver badges55 bronze badges

Comments

Jonas Ivy V. Imperial · Accepted Answer · 2013-06-18 05:55:57Z

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.

user405398 · Accepted Answer · 2013-06-18 06:00:25Z

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

answered Jun 18, 2013 at 6:00

user405398

Collectives™ on Stack Overflow

How to make the div scrollable

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related