How to make scrollbar invisible?

[tobidadog]

Forum URL: concretepawsteps.proboards.com

Hi! I'd like the scrollbar code highlighted in purple here to be invisible. Anyway I can do that? Thanks!

[Craig]

Hi

That doesn't appear to be default, so i am not sure entirely what that line does, so am not sure what you mean precisely by invisible. Could you elaborate.

[Derek‽]

Change overflow:auto; to overflow:hidden; if you want to get rid of the scrollbar.

Be advised that the "overflow" property handles how the browser handles content that stretches beyond the boundaries of the <div> and that auto makes the scrollbar appear whenever this takes place, while hidden simply hides whatever content doesn't fit.

If you want to hide the scrollbar and still be able to scroll through the content, well, you can try setting the overflow to "auto" for that div, and "hidden" for the parent div. There are no guarantees this will work in all browsers and future updates may correct this hacky-ish behavior. There is no official mention in the HTML5/CSS3 specifications regarding behavior for this scenario, so there's no official cross-browser solution. Making content scrollable in one div while inheriting the edict to hide the scrollbar from a parent div is a quirk, not a feature.

[Craig]

Aug 31, 2016 5:17:09 GMT -8 Derek‽ said:

Change overflow:auto; to overflow:hidden; if you want to get rid of the scrollbar.

Be advised that the "overflow" property handles how the browser handles content that stretches beyond the boundaries of the <div> and that auto makes the scrollbar appear whenever this takes place, while hidden simply hides whatever content doesn't fit.

If you want to hide the scrollbar and still be able to scroll through the content, well, you can try setting the overflow to "auto" for that div, and "hidden" for the parent div. There are no guarantees this will work in all browsers and future updates may correct this hacky-ish behavior. There is no official mention in the HTML5/CSS3 specifications regarding behavior for this scenario, so there's no official cross-browser solution. Making content scrollable in one div while inheriting the edict to hide the scrollbar from a parent div is a quirk, not a feature.

Hopefully that is what they meant.  It's what i assumed, but reading the subject, and then the post, confused me a little inasmuch as appearing to talk about different things, so wanted to clarify first.

[tobidadog]

Hey guys, to clarify, I have a scrollbar that I set with that simple code. I would like for the actual bar to not be visible, but still scroll.
Right now it looks like this
concretepawsteps.proboards.com/user/1
and I want to scroll on it without seeing that ugly grey bar.
Either that, or change the color on it. I just think it looks bad.

[Brian]

Derek‽'s solution would be the way to go. The easiest way to make it work is to add overflow: hidden; to the parent element of the overflow: auto; div, then change the width of the overflow: auto; div so that the scrollbar is cut off by the edge of the container.

[Tumbleweed]

Aug 31, 2016 10:48:35 GMT -8 tobidadog said:

Hey guys, to clarify, I have a scrollbar that I set with that simple code. I would like for the actual bar to not be visible, but still scroll.
Right now it looks like this
concretepawsteps.proboards.com/user/1
and I want to scroll on it without seeing that ugly grey bar.
Either that, or change the color on it. I just think it looks bad.

If it were invisible, no one would see it and they'd probably think there wasn't a scroll bar to scroll. You can make it semi-transparent or make it totally transparent but it'll only work in Chrome and Safari. You can only change the color in IE. FF and I believe Edge don't support any changes at all and not sure about any other browsers. If you want to try it for Chrome, Safari and IE, add a class to that div like so:

<div class="scrollable-content"> (other html/things here)

And then some css in the bottom of your style sheet:


/*scroll bar color for chrome and safari*/
.scrollable-content {
width:200px;
height:300px;
overflow:auto;
overflow-x:hidden;
overflow-y:scroll;
padding:2px 8px 2px 2px;
}
.scrollable-content::-webkit-scrollbar {
width:20px;
}
.scrollable-content::-webkit-scrollbar * {
background:transparent;
}
.scrollable-content::-webkit-scrollbar-thumb {
background:rgba(255,0,0,0.2) !important;
}
/*scroll bar color for IE*/
.scrollable-content {
  scrollbar-base-color: #dd0000;
  scrollbar-arrow-color: #00dd00;
  border-color: #000000;
}