Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
July 21, 2024 - @116.11 (what is this?)
Forum activity rating: Two Star Posts: 18/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :dive: Are u having fun?? :dive:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  customizing scroll bars?

« previous next »
Pages: [1] Print
Author Topic: customizing scroll bars?  (Read 1357 times)
Casual Poster ⚓︎

View Profile WWW

First 1000 Members!Joined 2022!
« on: July 09, 2022 @998.39 »

ive been a bit slow on my website coding lately but, as ive been planning a new shrine page i realized i really wanted to make all elements immersive, and one thing ive failed to figure out it... custom scroll bar. if this something that can be changed just with html/css? or do i need to do a bit more?

ive had a weirdly hard time finding concrete answers about this that can keep my code as simple as possible, tbh. so im not entirely sure how it works to change that. any links or explanations appreciated! again id like to keep things simple but, dont mind having to use a bit of javascript if thats where this goes.

when i customaizing, i mean: changing the color mainly. but being able to change the shape, width, etc too.

Hero Member ⚓︎

So many stars!

SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games

View Profile WWW

Thanks for being rad!a puppy for your travelsAlways My PalFirst 1000 Members!spring 2023!Squirtle!!!!MIDI WarriorMIDI Warrior1234 Posts!OzspeckCool Dude AwardRising Star of the Web AwardMessage BuddyPocket Icelogist!OG! Joined 2021!...
« Reply #1 on: July 09, 2022 @16.69 »

Ok so I only recently figured this out by snooping cinnis code and mixing it with old code from my site :ohdear:

You need to do it differently for Firefox and Chrome/Safari! Here is the code from my site:

/* Scrollbar styles */
/* Firefox */
* {
  scrollbar-color: #cd7c00 #000020;

/* Chrome + Safari */
::-webkit-scrollbar {
  background: #000020;
  width: 8px;

::-webkit-scrollbar-track {
  background: #000020;

::-webkit-scrollbar-thumb {
  background: #cd7c00;
  border-radius: 10px;

On the Firefox version the first colour is the bit you drag and the second colour is the background; note the * will make it chnage EVERYTHING that can scroll, if you only want to change the body scroll or scrolls within iframes you can change * to "body" or "iframe" etc
The Chrome/Safari version has WAY more options, you can do some really intense customisation on it, but at its simplest, the first 2 affect the background and the thumb is the bit you drag!

Documentation for Firefox version: https://css-tricks.com/almanac/properties/s/scrollbar-color/
Documentation for Chrome version: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar (Im aware the irony that this is the Mozilla documentation :omg:k:smile:

I know this is a bit clunky and MAYBE there is a better way to do it, but Iv not found one, if anyone knows better please correct me!

everything lost will be recovered, when you drift into the arms of the undiscovered
Casual Poster ⚓︎

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #2 on: July 09, 2022 @823.82 »

thank you very much! i seemed to hear there was a difference for browsers too but some pages just said firefox flat out didnt work at all-- i will def take a look at this and try it out!

Pages: [1] Print 
« previous next »

Vaguely similar topics! (3)

Frameset help - hide scrollbars on frames

Started by dotmidiBoard ☔︎ ∙ I need Help!

Replies: 7
Views: 722
Last post February 17, 2023 @94.83
by dotmidi
I made a video game! (Deaht Scrolls)

Started by Icey!Board ⚽︎ ∙ Arcade

Replies: 15
Views: 1730
Last post May 29, 2024 @997.28
by Icey!
HELP: Page scrolling down a bit every time I reload?

Started by ZeroBoard ☔︎ ∙ I need Help!

Replies: 0
Views: 488
Last post August 05, 2023 @513.74
by Zero

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2

MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi