overflow scroll doesn't work within fixed div?

Question

In my demo http://jsfiddle.net/batfafpf/2/ my modal is unscrollable even I set it to overflow-y:scroll. Not sure why, probably the fixed positin of the parent is causing the problem.

#dateTimeModal > div{
overflow-y:scroll;
}

When you give overflow you need to mention a certain height for the div too — anpsmn
– anpsmn, Commented Mar 4, 2015 at 8:42

Saurin Dashadia · Accepted Answer · 2015-03-04 10:17:16Z

1

The scroll event is not working due to two mistakes in style.

Remove, pointer-events: none;
make fixed height of your wrapper div.

Here is what it should be.

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;  
}

#dateTimeModal > div{
    overflow-y:scroll;
    height:50px;
}

edited Mar 4, 2015 at 10:17

answered Mar 4, 2015 at 8:43

Saurin Dashadia

1,18811 silver badges26 bronze badges

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

Comments

ZEE · Accepted Answer · 2015-03-04 08:48:00Z

0

add overflow-y: scroll; to this class and remove pointer-events: none;

.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:1;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;

        overflow-y: scroll;
    }

Live Demo

edited Mar 4, 2015 at 8:48

answered Mar 4, 2015 at 8:41

ZEE

5,8994 gold badges41 silver badges55 bronze badges

Comments

codemax · Accepted Answer · 2015-03-04 08:48:05Z

0

As mentioned by the earlier poster, remove pointer-events: none. And change height to 100%.

answered Mar 4, 2015 at 8:48

codemax

1,35210 silver badges20 bronze badges

Comments

alyssaeliyah · Accepted Answer · 2015-03-04 08:50:43Z

0

You should set a height, to command browsers to make div able to scroll when the height set, exceeded.

#dateTimeModal > div{
    overflow-y:scroll;
    height: 200px;
}

answered Mar 4, 2015 at 8:50

alyssaeliyah

2,2647 gold badges37 silver badges90 bronze badges

Collectives™ on Stack Overflow

overflow scroll doesn't work within fixed div?

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