1

I have this website: http://fosterinnovationculture.com/infographic/index.html and I'm having a problem displaying the vertical scroll bar. The parent div has a style of overflow: hidden;. I set an overflow-y: scroll; on the child div so it scrolls but it's not displaying a scroll bar. Does anyone know why it's not displaying?

Here is the code for the .scroll class:

.scroll {
  height: 90vh;
  width: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}

Here is the code for the parent div: 

#users {
 overflow: hidden;
}
CozyAzure
  • 8,280
  • 7
  • 34
  • 52
marcos
  • 121
  • 3
  • 14
  • 7
    Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Jun 08 '16 at 16:06
  • Consider adding relevant html and css code – Pushpendra Jun 08 '16 at 16:11

1 Answers1

2

Before giving an answer, I will say that the most important thing I tell myself when coding CSS is: if I start having to hack then I am making it too complicated.

With that said, start by removing every instance of overflow: hidden; in your code.

Then get this in there:

.top-nav {
    height: 70px; /* you already specify this on your site */
}
.scroll {
    position: absolute;
    top: 70px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow-y: scroll;
}
Joseph Hansen
  • 12,665
  • 8
  • 50
  • 68
  • Yes, I agree. I had a feeling that I was making it too complicated. I did exactly what you suggested but it's still not showing a scroll bar. http://fosterinnovationculture.com/infographic2/index.html – marcos Jun 08 '16 at 16:58
  • @marcos I had it working on your site just by using the web inspector in my browser. Let me see what else you need to get rid of. – Joseph Hansen Jun 08 '16 at 17:45
  • @marcos now get rid of `height: 100%` on `.scroll` attribute – Joseph Hansen Jun 08 '16 at 17:51
  • @marcos just so you know, I have a viewing problem with Safari on OS X El Capitan. `.scroll` has a scrollbar and `body` has a scrollbar because `.scroll { ...; height: 100%; ... }`. Delete the `height` part and it should be good. – Joseph Hansen Jun 08 '16 at 18:30
  • Hi Joseph, I'm pretty sure that I erased the height: 100% already. Are you still having the viewing problem? Thanks! – marcos Jun 08 '16 at 18:41