` hidden scrollies : coding tutorial

How I Code an Invisible Scroll: Intro to Coding

It's as simple as coding 3 div boxes: easy as 1, 2, 3 / A-B-C. They fit one into another like russian dolls. Let's try this with a 300px wide by 100px tall box. div tags, if you are unfamiliar, refer to a type of HTML tag that divides the page. Below are the steps, and new steps/additions to the code will be added in green. Coding vocabulary and div attributes (how you want your div to behave) will be in red. REMOVE THE SPACE BETWEEN THE "<" and "div>" or "/div>".***

You define the width and height of this box through the following code:

< div style="width: 300px; height:100px;">

and you want to put some sort of "filler" or place holder next to the ">" character. If you leave the code above like that, it will disappear when you exit from "Source."

< div style="width:300px;height:100px;">lorem ipsum

Next, you want to "cap" off your code or close your box - this is very important especially if you're fiddling with many boxes! In coding, to "end" anything, you usually add a back-slash (/). For example, if you have 2 words and only want to bold one, you use the attribute < b> to BEGIN the bolding, and a < /b> to END the bolding. For ex: lorem ipsum. For < div> tags, the concept is the same! Use < /div>. 

< div style="width:300px;height:100px;">lorem ipsum< /div>

ps. "lorem ipsum" is gibberish latin, a small piece of paragraphs of gibberish that coders use to see how text looks in a layout, website, or other forms of code. it's a very common and very useful bunch of bull.

How I Code an Invisible Scroll: The Secret (Not Really)

STEP 1: You need 3 boxes resting one inside another. This is how it will look like. (Don't forget your place holder!!)

< div style="width:300px;height:100px;"> 
< div style="width:300px;height:100px;"> 
< div style="width:300px;height:100px;">lorem ipsum< /div>
< /div>
< /div>

Naturally, this is how the code will look like in the source if you've saved your blog/page/layout and come back to the source. The first, outer most < div>tag MOST IMPORTANTLY needs to be the height/width of the area you want to scroll and NEEDS to include the attribute "overflow: hidden;". Overflow: hidden means that your box will not show anything that extends outside of it's height and width. The text will lay naturally in the box, but if your text is lengthy enough that it goes beyond our 100px, for example, then it will seem cut off!!

Hence, the stressed importance on not having a pixel more or less (unless you're adding a border: messy and more advanced). You might learn in the future that putting a padding tag (not important for beginners) will with your tag's width/height, so if you need to move any < div>s over any other < div>s (which is advanced), then please use margin tags. That's mainly why my layouts look just like they do on mobile as they do on desktops!

So, your code now looks like this:

< div style="width:300px;height:100px; overflow: hidden;">
< div style="width:300px;height:100px;">
< div style="width:300px;height:100px;">lorem ipsum
< /div>
< /div>
< /div>

STEP 2: SO, now that that is over with, the second < div> is our focus now. This < div> tag needs to be altered to allow us to scroll. The reason why invisible scrolls are so popular is because they are seamless, neat, and fashionable. The scroll bars take away from the layout because they take up space (about 20px, believe it or not; for mac chrome users, it's 18px wide - ing HUGE). In this < div> we are going to add TWO attributes. We want our < div> to scroll, AND we want to hide that ugly scrolly bar. 

To make that scrolling action able to happen, we put in "overflow: auto;". The overflowing words are allowed to show because this tag makes the box flexible, in a sense. It can hold more than just 300px by 100px's worth of information, you'll see. 

< div style="width:300px;height:100px; overflow:hidden;">
< div style="width:300px;height:100px; overflow: auto;">
< div style="width:300px;height:100px;">lorem ipsum< /div>
< /div>
< /div>

But wait, we have a problem. The scrolly bar is 18-20px wide, remember? That 18-20px is INSIDE your box, so it shows in the 300px wide box - you don't want that! To hide the scroll, you ADD 20px to the width of the second box!

< div style="width: 300px; height: 100px; overflow:hidden;">
< div style="width: 320px; height: 100px; overflow: auto;">
< div style="width: 300px; height:100px; ">lorem ipsum< /div>
< /div>
< /div>

STEP 3: This is the easiest step. Make sure your inner most div is the same width as your outer-most div. These divs, one inside the other, conform the the width of the div just outside itself if the width is not defined.

If I had two < div>s, one inside the other, and the outer box was 400px wide, the box inside would behave as though it too were 400px wide without the tag "width: 400px;". Height is a problem here, because the height tag fixes the length of the box. Unless you're adding multiple boxes in this scroll, the box probably won't scroll. Also, to make the second div scroll, you need enough content to make the box scroll. 

So, to fix the rigid-height proble, take "height: 100px," out of the < div>!

< div style="width: 300px; height: 100px; overflow:hidden;">
< div style="width: 320px; height: 100px; overflow:auto;">
< div style="width: 300px; height: 100px;">lorem ipsum< /div>
< /div>
< /div> 

Next, add some more words to your code to test how it scrolls. I chose to add more text from a lorem ipsum generator found here (link).

< div style="width: 300px; height: 100px; overflow:hidden;"> 
< div style="width: 320px; height:100px; overflow:auto;"> 
< div style="width: 300px;">Lorem ipsum dolor sit amet, movet euismod honestatis eu est, iusto eligendi dissentiunt ut sea, eam ea justo luptatum accommodare. At sed amet adversarium, ei nonumes ancillae usu. Ea posidonium philosophia ius. Pro te probo oporteat. Te quo utinam ocurreret, ad ius stet suavitate gloriatur, eu essent volumus vix. Est ne alii aliquando, mei ad dictas scaevola.< /div>
< /div>
< /div>

Requested by a friend, and yes, you can copy the code into the source/play around with it. Have fun, don't forget to save, and you can find the codes to any layout by clicking the "Source" button in the upper left corner of the blog's text box (when editing)! 

***Note: The reason why I need the space between the "<" and "div>"s is so that the code doesn't read that < div> as an actually tag. I want the plain text to show. But in the source code, you don't want that space!