Scroll Bars on the Example Project

HTML-CSS
1

Tell us what’s happening:
I’m studying the example page and I don’t see in the code where they are getting some of the functionality. For example, I know a few ways to make scroll bars (with CSS for example). But I don’t see it in their code. I don’t see anything it the top where they reference any front-end libraries. I see the @media that gives new position and width to the navbar, but its not clear to me how they partition it from the .main-doc. I can figure out how to do it myself using Bootstrap or writing a CSS. But I REALLY want to know how they wrote this pen. Is there something behind the scenes? Where is the code for the Scroll? Where is the grid template? Or the flex box? Any answers or clues will be MUCH appreciated.

Your code so far
The “Technical Documentation” example on codepen.io

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hey @magopolis!

For the technical document page you only have to use html and css. No libraries or frameworks required.

In this project, there is a fixed navbar to the left of the page. Here is part of the CSS code for that.

#navbar {
  position: fixed;
  min-width: 290px;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 100%;
  border-right: solid;
  border-color: rgba(0, 22, 22, 0.4);
}

Here is part of the css code for the main content

#main-doc {
  position: absolute;
  margin-left: 310px;
  padding: 20px;
  margin-bottom: 110px;
}

Basically with the navbar fixed to the left and the content on the right that is how the scroll works for this project.

Hope that makes sense!

3

Thank you for looking at that. I did notice that in the CSS and it makes perfect sense. My next step was to isolate those CSS blocks and experiment with the margins…I think I am at a low-confidence/pessimism place in my web design chops. I just didn’t think it would work. How about the scroll bar? I’ve made those before but don’t recognize it in the code here.

Also, do you play oboe? I played Jazz saxophone in college and I’ve had a couple Zoom lessons with a sax player who also does coding. Its working out really well. He had never considered teaching coding like a music lesson. I am writing a paper about it. Thanks again for the help. I think I just needed someone to confirm that was how they did it. Codepen confuses me sometimes.
Mike

4

Hey @magopolis!

Based off of the FCC code they didn’t make a custom scroll bar. The scroll bar is just automatically created because there is a lot of content on the page .

And yes I am an oboist :grin: