Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

simon buysse
simon buysse
9,716 Points
Posted by simon buysse
simon buysse
9,716 Points

overflow-y: scroll, scrollbar doesn't add the actual bar

Hi there! I'm trying to add a scrollbar to a container div on my page. I do this using the overflow-y property: 

.page-content { 
    margin-top: 60px;
    height: calc(100% - 60px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

The scrollbar container appears, but somehow it doesn't show the actual bar that you do the scrolling with. Neither do the arrow keys let me go down. (And there is actual content down)

Here's a screenshot of what I mean

screenshot link

7 Answers

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

Hi Stephen Printup , I tried it, and that just removes the whole scrollbar.

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

I saw a lot of posts on the internet stating that overflow-y should be accompagnied with a height for the div. Now I didn't give it much attention since I have a height value set. BUT, turns out that changing my height value to something fixed like 800px makes the scrollbar appear. The problem was the use of the 100% in my height definition

I guess the overflow-y property is not one you can combine with responsive design.

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Ok, maybe I'm not getting what you're trying to do. I meant:

<div class="content">
<p>1 of 10 aldkjfdlkajdjkdajdsf<br>
2 of 10 aldkjfdlkajdjkdajdsf<br>
3 of 10 aldkjfdlkajdjkdajdsf<br>
4 of 10 aldkjfdlkajdjkdajdsf<br>
5 of 10 aldkjfdlkajdjkdajdsf<br>
6 of 10 aldkjfdlkajdjkdajdsf<br>
7 of 10 aldkjfdlkajdjkdajdsf<br>
8 of 10 aldkjfdlkajdjkdajdsf<br>
9 of 10 aldkjfdlkajdjkdajdsf<br>
10 of 10 aldkjfdlkajdjkdajdsf<br>
</p></div>

.content {
  max-height: 100px;
  overflow: auto;
  background-color: blue;
  color: white;
}

Try plugging that into code pen then scrolling the div. That could be responsive.

-Stephen

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

So look, I'm following this tutorial for making a css drawer menu: http://www.designcouch.com/home/why/2014/04/23/pure-css-drawer-menu/ This consists of having 2 panels, 1 which is your drawer menu, and 1 that holds your content. You can see the problem I'm having in the picture below (look at the scroll bar) scroll

There are a couple of settings for .content-page that make a scrollbar pop up:

  1. height: 800px
  2. max-heigth: 800px

There are a couple of settings that make the scrollbar blank:

  1. min-height: 100px;
  2. height: 100% (or whenever I define it using a percentage)
  3. max-height: 1000px; <-- this one is really strange, since max-height: 800px does work!
Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points
Stephen Printup
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Ok, well hmm, the answer is not obvious to me either. Coincidentally, my blog has a similar feature and you're welcome to investigate using dev tools. The link is https://oneprizm.wordpress.com/

simon buysse
simon buysse
9,716 Points
simon buysse
simon buysse
9,716 Points

Thank you @Stephen, will check it out