#scrollbar

[epithalamia]

[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.

[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 !!

[cssscriptcom]

Enable Synced Scrolling On Scrollable Elements - ScrollMirror

ScrollMirror is a small yet powerful JavaScript library that allows you to synchronize the scroll positions of multiple scrollable elements on a web page. It works by mirroring the scroll position in either vertical or horizontal directions across any number of matched elements. See Also: Synchronize Scrolling In Two Scrollable Elements – Scryll Synchronize scrolling Across Multiple scrollable…

[maiosx]

Scrollbar Evolution

"ux is dead"

no u

[flowersforthemachines]

Remembered I talked about it under one post but never actually posted this here.

Here's a (rough) visualisation of how many times Rook's faction is referenced in conversations. Based on the pics, from most to least referenced it goes like this:

Grey Wardens > Mourn Watch > Antivan Crows > Shadow Dragons > Veil Jumpers > Lords of Fortune

[gertritude-art]

will also show my general ui/mock-up progress, for anyone curious. had a general idea of the screen division to start with, then tried to figure out more how it would look. i wanted there to be a heavier emphasis on it all being a sort of "stage" production to start with, so i initially had the idea to have an old roman stage on the left. ultimately i found this too distracting, though, so i ditched it; you can still see this influence in the scroll bar, whose base is a heavily simplified version of a roman pillar. lenora only got one sprite due to jam restrictions so i was figuring out how she should look throughout all of this (so that she could harmonize with the other UI elements). Everything was half trial-and-error, half looking up the UI of other games to see how they implemented things!

[queenlua]

this list is a depressing enumeration of everything that makes modern web design so aggravating, lol

[tumatawa]

My IE8 themed Firefox browser will become unusable by March 14th 💔 I feel like Cinderella at the ball before the clock stikes 12

You were the best thing I ever had girl...I'll never forget the many beneficial security updates I fought to protect your beautiful face

[sanchoyoscribbles]

I made a dress up game!!! I thought Aqua would be a really fun character to use because 1. an excuse for me to use soft and cute pastels for most everything 2. in the story, Persimmon does make her a lot of cute outfits and she canonly will have a lot of fun wigs!

you can play it here! It's best played on desktop! (but should theoretically work on tablets and mobile, kind of. it's not perfect and there are a small handful of known issues on mobile!)

thank you to @spectralreplica and @galactickittiecat for helping test it :D

I plan to come back and add more assets at some point!! maybe seasonally? and if you're interested in behind the scenes, I put some of those on my kofi, along with basically all of the assets on the website on there! (save for the easter eggs, which are also pretty much exclusive to desktop! :3)

[rhube]

Sharing to save a life:

Do you hate that you can't see your scroll bars anymore - that they keep dancing in and out depending on the position of your mouse??

You can totally fix that!

In Windows 11, go to Settings > Accessibility > Visual effects and toggle the first setting, Always show scrollbars, to On.

Now your scroll bars are always there, ready for you to use!

This was not the issue I was trying to fix when I found it, but it sure helps!

[Edit because someone thought this was Windows 11 specific in the notes - it's not. The vanishing scroll bars have been common to both Windows and Mac for a long time. This just tells you how to turn them back on!]

[bellshazes]

i did not build etho.fyi and i do not host etho.fyi in fact i live in mortal terror of whomever did build and host etho.fyi seeing my etho.fyi search history because it's shit like this

[thanatologie]

@oakthcrn - What was the first muse that you’ve written? questions for the mun / accepting

auron from final fantasy x.  and i remember thinking gosh he's so old (he was thirty-five) and i'm embarrassed for baby rper me.  old.  old.  me, now, not writing a single character under the age of forty like…but no, i wrote auron, and i could actually probably still pick him up and do okay because my habit of writing one character at a time for several years stretches back to the dark ages of greatestjournal (90% of y'all will have no idea what gj was because it's been dead for years but boy it was the place to be), even though at the time i tried to write more than one (and usually failed miserably).  honestly the only memorable thing from this time was having a friend who wanted to write with my auron only to steal all my headcanons and started writing auron herself and threw the world's biggest hissy fit when she got called out for it.