quick question about scrollbars
Replies
Okay, is there a way to make an existing DIV scroll-able without a scrollbar (without overlaying something on top of it)? I know for Chrome, there's
/* Just trying some scrollbar voodoo. */
::-webkit-scrollbar { width: 0px; background: transparent; }
But I wanted to see if I can hide in other browsers too. Do you know if there an equivalent for that in FF and/or IE? If you have any tricks, let me know.
Also, is it possible to set a default "tab", assuming that each section has a transparent background. Currently, I have links that make a certain section visible when clicked. However, they are all hidden until selected so is there any way to make one load by default but disappear when another section is selected? I could have one section always visible but the problem is when I click another section, it's going to overlap since the background are transparent and they all sit in the same box. [edit] I'm just gonna add an image background to them
(I'm working on Aros)
[font=mistral]r i p t i d e[/font]
- To answer your scrollbar question, in webkit browsers you can do as you said. In IE 10+, you can hide scrollbars with this rule:
.whatever { -ms-overflow-style: none; }
There is no equivalent in non-webkit browsers, unfortunately. (Firefox had a -moz-scrollbars-none, but it is now deprecated.) The best we can do is a bit of a hack: Place your content div inside of a slightly smaller div, and set your content div to be scrollable (overflow: auto) but hide overflow on the outer div.
<div style="overflow: hidden; width: 400px;>
<div style="overflow: scroll; width: 408px;>scrollable
Basically, you will have a scrollable div, but the scrollbar part of it will be hidden by the div that it's inside of (because you have set overflow: hidden on the outer div). I hope this is making sense - I'm reading my own typing and I feel like I'm doing a terrible job explaining this xD
There is a more sophisticated version of this, by the way, that allows you to hide the scrollbar without knowing its width (and yes - it is CSS only!) but I am not sure if Subeta will allow all of the code it requires. Good luck!
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
Hi, thank you for the tip! I can definitely use that method for the custom divs I created.
That still leaves the , though. I don't have the ability to move it inside another div since I didn't create it. I think the container it's currently in (?) also holds everything else so I can't mess with that, or can I?
[font=mistral]r i p t i d e[/font]
I took a look at Aros' page and I will tell you that, since you are using absolute positioning, it doesn't matter that your elements are inside of . Since they are set to "position: absolute", they aren't actually inside anymore as far as positioning is concerned.
A better way to code what you have would be to set position: absolute on itself, and allow its children to remain within it. Then, you could set widths on and its children, to hide the scrollbar as you wish.
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
Ah, okay. That makes sense. Thank you! I will do that instead!
[edit] Hmm, it's a no-go. Everything is going to be inside of pet_info regardless it seems. Because even when I have everything as an absolute position, they're still inside the pet_info container. I can't take them out.
[font=mistral]r i p t i d e[/font]