Help invisible scroll bar?

[bixby]

i'm trying to make a code that scrolls but the little scroll bar is really annoying. what is the code to make that invisible but still have the code scroll?

 

[vliamint]

i'm trying to make a code that scrolls but the little scroll bar is really annoying. what is the code to make that invisible but still have the code scroll?

The way I do it is to have a container div with overflow: hidden, and have another one inside that div with overflow-y: scroll and padding-right: 25px. It'd look something like:

[class=container]
height: 100px; 
width: 100px; 
overflow: hidden;
(plus all the other css properties)
[/class]

[class=textbox]
height: 100px; 
width: 100px; 
overflow-y: scroll;
padding-right: 25px; 
[/class]

[div class=container]
    [div class=textbox] your text here [/div]
[/div]

All your positioning goes on the container div, and the textbox just sits inside it (matching height/width - I think you can use 100% for height/width too but I just use px) with background-color: transparent.

 

[Fable]

i'm trying to make a code that scrolls but the little scroll bar is really annoying. what is the code to make that invisible but still have the code scroll?

There is no special code to make it invisible. What we do is we push it sort of out of visible bounds with two divs making it appear as though there is no scroll bar. As already shown by the earlier reply. Keep in mind though, some versions of this 'hack' are not mobile friendly and will clip the text.

 

[vliamint]

There is no special code to make it invisible. What we do is we push it sort of out of visible bounds with two divs making it appear as though there is no scroll bar. As already shown by the earlier reply. Keep in mind though, some versions of this 'hack' are not mobile friendly and will clip the text.

If you then put the text in another div and messed with the padding or something (maybe making the text div slightly smaller than the textbox div like in my example?), could that not avoid the clipping issues? I've never had clipped text with the code I just used, but I don't check my codes on mobile too often.

 

[Fable]

If you then put the text in another div and messed with the padding or something (maybe making the text div slightly smaller than the textbox div like in my example?), could that not avoid the clipping issues? I've never had clipped text with the code I just used, but I don't check my codes on mobile too often.

It depends on how you do it. If you just use two divs, with one pushing the padding, it tends to clip the text. I've basically gone into a 3 div version which solves the problem by having two containers basically. The main container (which sets the width/height using px values), the secondary container with 100% width (which solves the text clipping), and then the 3rd most inner div with the padding to push the scrollbar into the hidden overflow of the container divs.

I have examples of my stuff in my own bbcode thread with how that works. I've tried the calc width stuff as well and so on and found this works best for me.

 

[vliamint]

It depends on how you do it. If you just use two divs, with one pushing the padding, it tends to clip the text. I've basically gone into a 3 div version which solves the problem by having two containers basically. The main container (which sets the width/height using px values), the secondary container with 100% width (which solves the text clipping), and then the 3rd most inner div with the padding to push the scrollbar into the hidden overflow of the container divs.

I have examples of my stuff in my own bbcode thread with how that works. I've tried the calc width stuff as well and so on and found this works best for me.

Ahhh, okay. I had it with the first container div with overflow: hidden (and px for height/width), the second inner div with overflow-y: scroll and padding-right (and the same px or 100%, idk which works) for the hidden scrollbar, and then a third div that is just text css properties (font/color etc) but with either a padding or maybe calc % for the width to prevent the clipping? I have no idea if that'd work; its all in theory off the top of my head. ;-;;

I didn't think of using the second div to work around the clipping.

 

[Fable]

Ahhh, okay. I had it with the first container div with overflow: hidden (and px for height/width), the second inner div with overflow-y: scroll and padding-right (and the same px or 100%, idk which works) for the hidden scrollbar, and then a third div that is just text css properties (font/color etc) but with either a padding or maybe calc % for the width to prevent the clipping? I have no idea if that'd work; its all in theory off the top of my head. ;-;;

I didn't think of using the second div to work around the clipping.

Yeah setting the 2nd to 100% means it'll only be 100% width of the container. Honestly, at this point each time I do a pushed scrollbar I use something different, lol.

 

[Alteras]

I use the padding-right method, since it preserves a lot of the original sizes without me having to do anything. If I wanted to add a padding to the text itself, I just add the padding to the first div. In cases where I do sometimes see clipping due to font, the padding to the first div works well. All of this works because by default, everything has the box-sizing: content-box property, meaning that the padding doesn't get counted inside the width.

I use to work with the calc() and the %, but that caused me so much headache.

 

[bixby]

oh my

would any of you want to take a look at my code and tell me what to do?

 

[vliamint]

oh my

would any of you want to take a look at my code and tell me what to do?

I'm happy to have a look at it. You can PM me if you'd like.