#scrollbar

[pixelsjar]

random dividers from gifcities

[sheepfilms]

An old GIF of mine, I improved the rotoscoping and rescaled it

[nitzukai]

some scrollbars.

[whereinmnl]

HOW TO MAKE CUSTOM SCROLLBAR

This is the code I used for my personal blog:

::-webkit-scrollbar { width: 10px; background: #000000; } ::-webkit-scrollbar-thumb { background: #458eff; border-radius: 5px; }

Now, if you want to change it. Go to your CSS, or find this in your HTML <style> / <style type=css""> and copy paste the code above.

::-webkit-scrollbar { (THIS IS FOR STYLE OF THE SCROLLBAR ITSELF) width: 10px; (HOW THICK YOU WANT IT TO BE) background: #000000; (THE BACKGROUND OF THE SCROLLBAR) }

::-webkit-scrollbar-thumb { background: #458eff; (THE COLOR OF THE SCROLLBAR) border-radius: 5px; (HOW CIRCLE YOU WANT YOUR SCROLLBAR TO LOOK LIKE) }

You can use this website for the color codes.

Disclaimer: The code is not mine, I just heavily tweaked it from the owner.

[epithalamia]

[nofollowgame]

🔶 screaming bugs in No Follow 「game」 :: File #000001

Delete your site! Log out!

[olearxiia]

carrd scrollbox

<style>

#scroll {

height: 125px;

width: 150px;

padding: 2px;

border: 2px solid black;

border-radius: 2px;

background: rgb(255,255,255);

background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(235,209,255,1) 100%);

font-size: 1em;

overflow: auto;

}

</style>

<div id="scroll">

info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info

</div>

OG ver (also made by me) Pastebin link this version is slightly altered from the original one I made. You need pro standard for this scroll box.

Here's what it looks like:

[manonamora-if]

coding gawds! i need ya help. im using vanya's template but i can't get the scroller bars to disappear when the screen is like big enough to get the whole text. and even when there's some scrolling some of them are just there but uselessss ;-; i can't deal....

Hi Anon!

Vahnya has released two different templates, so I'm not sure which one you are having troubles with... but I know I can fix this :P

Overflow and Scrolling

When a screen size is too small to accommodate all the content of the file, it is said that the contents overflow the container element. And to be able to see all of it, a scroll bar is essentially needed.

To show/hide a scroll bar on an element, you use the CSS rule overflow. For example:

body { overflow: auto; <- will only show the needed scrollbar overflow: scroll; <- ALL scrollbars show overflow: hidden; <- will hide the overflowing content overflow: visible; <- will show the overflowing content without a scroll bar }

I'm going on a limb there and say the overflow rule is set on 'scroll'. You can change that to 'auto' (or potentially remove it).

Note: the overflow should be contained to the element actually overflowing. In most Interfaces of Twine games (since they are built on the base UI), the body, #ui-bar and #ui-dialog-body should be the only one where this rule is needed.

Why Scroll and not Auto?

Essentially comes down to making it compatible with Internet Explorer. But IE is very rarely used nowadays, since Microsoft moved to Edge (and even before, let's be honest).

Scrollbar Customisation

Say you want to keep the scrollbar after all, but you'd want to tweak it to make it less visible anyway. You can customise it with some more CSS!

NOTE: Firefox and Chromium-based/Safary/Edge browsers have different rules.

FIREFOX

The scrollbar customisation has very few rules, and only two actually useful:

body { scrollbar-width: thin-auto-none; scrollbar-color: color-of-bar color-of-gutter; }

And that's essentially it...

You can add those two rules in whichever element that has overflow set.

CHROMIUM

You don't but those rules inside an element like Firefox, but as a separate entity.

::-webkit-scrollbar {width: 10px; height: 10px} ::-webkit-scrollbar-track {background: COLOUR;} [gutter] ::-webkit-scrollbar-thumb {background: COLOUR;} [scrollbar] ::-webkit-scrollbar-thumb:hover {background: COLOUR;}

These are usually the most used ones out there, but you can find the whole list of selector here.

They will apply to the whole page, unless you add a certain element before the webkit, like this:

#ui-dialog-body ::-webkit-scrollbar {}

Have fun !!