I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Foo</title>
</head>
<body>
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
</div>
</body>
</html>
style.css
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: hidden;
}
I use css infrequently, but I thought that the following should create a scrollable area. Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll. Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Foo</title>
</head>
<body>
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
</div>
</body>
</html>
style.css
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: hidden;
}
- did you try .scroll-area { overflow-y: scroll; overflow: hidden; } – proggrock Commented Apr 25, 2013 at 17:17
- Thanks, everyone. The overflow: hidden was definitely the problem! Appreciate all the super fast responses. – Alex Pritchard Commented Apr 25, 2013 at 17:42
6 Answers
Reset to default 2Well you're using overflow-style which isn't supported in any major browser yet ..
Setting overflow to auto or scroll on .scroll-area will have the vertical scrollbar appear as expected
http://jsfiddle/kRcaR/1/
You should explicitly set overflow to auto (or to scroll if you need scrollbars appear all the time):
.scroll-area {
overflow: auto;
}
DEMO: http://jsfiddle/aNTHx/
You need to set overflow: auto or if you just want the y-axis to scroll overflow-y: auto; overflow-x: hidden;
Your div should have this overflow styling for vertical scrolling:
.scroll-area {
overflow-y: scroll;
}
Or if you want to scroll horizontal:
.scroll-area {
overflow-x: scroll;
}
Your hiding the scroll bar with overflow: hidden;.
If you change to:
.scroll-area {
overflow-style: auto;
overflow: auto;
}
HTML
<div id="history" class="scroll-area">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum place
</div>
CSS
#history {
height: 200px;
width: 200px;
border: 1px solid #666;
padding: 8px;
}
.scroll-area {
overflow-style: auto;
overflow: scroll;
}
DEMO
http://jsfiddle/YxsLc/1/
EXPLANATION
If You want to scroll content in html elements You should use property overflow: scroll;
Goodluck in future code.