Issue
I have body overflow set to hidden, but I want to be able to scroll inside a div if it exceeds viewport height, is that posible? With the following, a scrollbar appears but it is not scrollable.
<div class="green"></div>
body {
background: black;
height: 3000px;
overflow: hidden !important;
}
.green {
background: green;
width: 100%;
height: 1500px;
overflow-y: scroll;
}
fiddle: https://jsfiddle.net/q5a43c63/
Solution
It depends on what you want to achieve, but an easy fix to your problem is to change your code to this:
body {
background: black;
height: 3000px;
overflow-x: hidden !important;
}
If your content is hidden by a parent container in the y-direction, then the content in the child container cannot be scrolled in that same direction.
Edit: You need to add a wrapping container to the green area if you want the green to be scrollable, but not the body. Check the updated fiddle.
https://jsfiddle.net/q5a43c63/1/
Answered By - Prince John
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.