07-25-2017, 07:13 AM
[align=center]
Acrylic's guide on hidden scrolling!
I'm not the greatest at explaining things but bear with me as I try best to simplify hidden scrolling as well as I can.
Unfortunately, achieving hidden scrolling is not done through one simple code although I wish it could be done that way. Instead we have to use three div codes with the use of padding to conceal the scroll bar. The first div will be what your box will look like. If you want a border or a certain background this is the box you'll be putting these codes in. The second box has no real purpose other than to conceal the scroll bar and will contain padding and width and height codes. The final div is your text formatting essentially. Your text will go in this last div and your font style, family, colour etc codes will be in this div.
That's the basic run down, let's get onto the actual code!
[table]
[/table]
So now you've had a little look at what the end goal is for this guide, let me explain how hidden scrolling works.
Hidden scrolling works in two ways, you can divide it up into 3 divs. One for your box, one for your scrolling and a third div for your text styling. The other way consists of 2 divs instead. I will be teaching the first way I mentioned but will also tell you what to do if you want to use less coding and take the 2 div alternate route.
Our first div in hidden scrolling is what we ultimately want our box to look like. I like to think of it as the container. It's a relatively simple code depending on how fancy you want your box to look and we fill this div with all of our good stuff such as our hidden scrolling.
In regards to our example, this container will have a border code, a background code, padding and the standard width/height codes. Our container will also use the overflow hidden code. With all of these taken into consideration our container code should look like this:
Our second div is where the magic starts to happen. This div is our div that will scroll and ultimately, hide our scrollbar to achieve the hidden scrolling effect. In order for our scrollbar to be invisible we need to use padding-right to hide it. This padding should be 17px if we don't want any actual padding in our box. However, our example box we are coding has 20px of padding. To effectively hide the scrollbar with this extra padding we need to add 20 onto our 17px. This then becomes a padding-right of 37px.
The code for the second div is very simple yet highly effective:
Lat but not least, we have the last div. If you want to save time and choose not to code 3 divs that's fine, just skip right on to the next section but if you want to seem like you have your life put together like me continue reading on.
Our last div in the code focuses on the styling of our text. How do we want it aligned? How do we want our letters spaced? What font do we want? All the codes corresponding to these questions and questions alike go into this final div. In the example fancypost the font used is verdana with a 1px letter spacing, text aligned to justify, and a line height of 100%. The code for this div is below!
Lastly, to finish our code we need to close off the div tags with /div.
If you've skipped to this section to read about how to do hidden scrolling in 2 divs it's rather simple. All you need to do is put your text styling codes into your second div like this:
[code=before][div style="width: 200px; height: 200px; padding-right: 37px; overflow: auto"][/code]
[code=after][div style="width: 200px; height: 200px; padding-right: 37px; overflow: auto; font-family: verdana; text-align: justify; line-height: 100%; letter-spacing: 1px;"][/code]
If you have gone with this route you only need to close off the tags with two /div's.
There you have it! This is my guide to hidden scrolling and I hope you learnt something new. If you ever have any questions about coding feel free to pm me and I'd be happy to answer to the best of my ability!
If you are not comfortable enough with your coding yet or if you're lazy that you feel as though you couldn't do hidden scrolling from scratch I've provided you with a skeleton for hidden scrolling that you are free to use and tamper with in your own codes however, I highly suggest you try out hidden scrolling from scratch in order to better familiarise yourself with how hidden scrolling works.
I'm not the greatest at explaining things but bear with me as I try best to simplify hidden scrolling as well as I can.
Unfortunately, achieving hidden scrolling is not done through one simple code although I wish it could be done that way. Instead we have to use three div codes with the use of padding to conceal the scroll bar. The first div will be what your box will look like. If you want a border or a certain background this is the box you'll be putting these codes in. The second box has no real purpose other than to conceal the scroll bar and will contain padding and width and height codes. The final div is your text formatting essentially. Your text will go in this last div and your font style, family, colour etc codes will be in this div.
That's the basic run down, let's get onto the actual code!
[table]
In this guide we will be learning to code a 200x200px box with hidden scrolling exactly like the one on the right.
So now you've had a little look at what the end goal is for this guide, let me explain how hidden scrolling works.
Hidden scrolling works in two ways, you can divide it up into 3 divs. One for your box, one for your scrolling and a third div for your text styling. The other way consists of 2 divs instead. I will be teaching the first way I mentioned but will also tell you what to do if you want to use less coding and take the 2 div alternate route.
Our first div in hidden scrolling is what we ultimately want our box to look like. I like to think of it as the container. It's a relatively simple code depending on how fancy you want your box to look and we fill this div with all of our good stuff such as our hidden scrolling.
In regards to our example, this container will have a border code, a background code, padding and the standard width/height codes. Our container will also use the overflow hidden code. With all of these taken into consideration our container code should look like this:
Code:
[div style="width: 200px; height: 200px; background: #f4f4f4; border: 1px dotted #ccc; padding: 20px; overflow: hidden;"]Our second div is where the magic starts to happen. This div is our div that will scroll and ultimately, hide our scrollbar to achieve the hidden scrolling effect. In order for our scrollbar to be invisible we need to use padding-right to hide it. This padding should be 17px if we don't want any actual padding in our box. However, our example box we are coding has 20px of padding. To effectively hide the scrollbar with this extra padding we need to add 20 onto our 17px. This then becomes a padding-right of 37px.
The code for the second div is very simple yet highly effective:
Code:
[div style="width: 200px; height: 200px; padding-right: 37px; overflow: auto"]Lat but not least, we have the last div. If you want to save time and choose not to code 3 divs that's fine, just skip right on to the next section but if you want to seem like you have your life put together like me continue reading on.
Our last div in the code focuses on the styling of our text. How do we want it aligned? How do we want our letters spaced? What font do we want? All the codes corresponding to these questions and questions alike go into this final div. In the example fancypost the font used is verdana with a 1px letter spacing, text aligned to justify, and a line height of 100%. The code for this div is below!
Code:
[div style="width: 200px; height: 200px; font-family: verdana; text-align: justify; line-height: 100%; letter-spacing: 1px;"]Lastly, to finish our code we need to close off the div tags with /div.
Code:
[/div][/div][/div]If you've skipped to this section to read about how to do hidden scrolling in 2 divs it's rather simple. All you need to do is put your text styling codes into your second div like this:
[code=before][div style="width: 200px; height: 200px; padding-right: 37px; overflow: auto"][/code]
[code=after][div style="width: 200px; height: 200px; padding-right: 37px; overflow: auto; font-family: verdana; text-align: justify; line-height: 100%; letter-spacing: 1px;"][/code]
If you have gone with this route you only need to close off the tags with two /div's.
There you have it! This is my guide to hidden scrolling and I hope you learnt something new. If you ever have any questions about coding feel free to pm me and I'd be happy to answer to the best of my ability!
If you are not comfortable enough with your coding yet or if you're lazy that you feel as though you couldn't do hidden scrolling from scratch I've provided you with a skeleton for hidden scrolling that you are free to use and tamper with in your own codes however, I highly suggest you try out hidden scrolling from scratch in order to better familiarise yourself with how hidden scrolling works.
Code:
[align=center][div style="width: WIDTHpx; height: HEIGHTpx; background: #COLOUR; border: NUMBERpx TYPE #COLOUR; padding: NUMBERpx; overflow: hidden"][div style="width: WIDTHpx; height: HEIGHTpx; padding: NUMBER+17px"][div style="width: WIDTHpx; height: HEIGHTpx; all your text style codes go here!"]la dee da your text goes here <3[/div][/div][/div][/align]![[Image: AgxpNgG.png]](https://i.imgur.com/AgxpNgG.png)
