#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; }

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

<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:

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 {}