Is this scrollbar customizable with CSS?

[Anonymous]

Greetings,

I’m wanting to customize the scrollbar on this page, but am not sure if/how to do it. I’ve had a look around the net and the examples I’ve seen don’t apply to in page scrolls.

Thanks.

[Paulie_D]

Some browsers will let you (Webkit for one) and some won’t.

https://css-tricks.com/custom-scrollbars-in-webkit/

http://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox

http://stackoverflow.com/questions/9332742/how-to-get-a-custom-scroll-in-firefox-and-ie

[Anonymous]

Greetings Paulie,

Yes, I saw those examples, and others around the net while trying to find an answer to this. Still trying to learn new tricks with CSS, I need a bit more than vaguery. All that is currently producing the scroll bar on the page noted is `overflow-y: scroll; height: 517px;`“ in the #text element. I know that a simple “plug and play” approach will not work here so I’m hoping that those who know how to do this will teach people like me who don’t know, how to.

Depending on what site one visits I see conflicting opinions as to whether customization works with Firefox, IE, and the other browsers out there. Someone new to this doesn’t know and it’s quite confusing when the “experts” don’t seem to either.

What specifically creates a scrollbar outside of what I have now? I assume that in order to customize a scrollbar it will need a div class, but I’m not sure about that. Can someone give me a start. please?

[Paulie_D]

I need a bit more than vaguery.

Vaguery is what we have. Some people love to do it and put a lot of work into adding additional complexity to their sites to make sure that their sites look the same in every browser…often using multiple implementations of code to achieve the same ends, some don’t see the need and some just take a middle path and do what they can without going the ‘full monty’ route.

See: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

I’m hoping that those who know how to do this will teach people like me who don’t know, how to.

I appreciate that but, with respect, this is not a full tutorial site although it has some elements of that. I’ve always found it to be more of a “Help you figure out what you are doing wrong” forum.

Perhaps there will be someone here with the knowledge and time to give you full guidance on what you want but, from my experience, it’s unlikely.

I’m not trying to be negative here, really, just manage your expectations.

Browser customisation might be an idea for a longer @ChrisCoyier article or video (series) though.

[Anonymous]

I’ve always found it to be more of a “Help you figure out what you are doing wrong” forum.

That’s Ok by me. I guess I need to put what I need in another way. Is there anyone here who can/will help me figure out what I’m doing wrong with getting the scroll bar within my page to customize?

[Anonymous]

I’m still having trouble with this and would appreciate any help. Any at all.

[Paulie_D]

If people can help, they will.

Patience is all I can recommend.

Perhaps you could narrow down your requirement.

Would you like to target a specific browser first? As I mentioned…there is no ‘one size fits all’ solution.

[Anonymous]

Paulie,

I’m not sure how best to approach this, which is why I am asking questions. If addressing specific browsers first will get me a scrollbar that is customizable cross browsers, then yes, address that first.

It’s quite hard to understand why similar questions are readily answered, yet mine have been seemingly danced around for days. Those who have “deadlines” have had droves turn out, yet I’ve had deadlines sine I first came to this forum in the fall, and have missed every single one. I’ve also been asked to make a codepen on the claim it will be easier to get help, yet nothing. I’m asked what the problem is when it was spelled out in the first post. I have always appreciated your help, but in the past few days I get the impression I’m just getting my chain yanked.

I came here to learn CSS. If you have to be in a certain group, or somesuch other, then I’d like to know and I’ll be happy to vacate the board.

[Anonymous]

That’s the closest that I’ve seen to what I was thinking about and the only demo that has worked on FF! Thank you so much! I’ll have a look at it more tomorrow though as it’s night time where I am and it’s been a long day and long month.

I deeply appreciate your replies and will get back with you tomorrow.

[Anonymous]

Greetings Shane,

Well, I’ve been working on this all morning in an attempt to adapt the scrollbar in the link you provided to my page here. I’m missing something, of course. I even tried to “back engineer” the link you gave by replicating it then taking out only the basics to understand how it works, but that didn’t work either as I can’t get the scroll to show on it either. I tested all the links to the scripts and styles and they all work.

On my page the style and script begins at line 7 and ends at line 961. The line for the text is at line 633 (though I think the values here are supposed to be in the class="scrollbar" which is at line 961 with the #text.

What am I doing wrong?

Best Regards.

[Anonymous]

Greetings Shane,

I think I’m going to just not have a scrollbar on my long pages. It will look like crap, but since I can’t figure out the basic function and customization settings, I’ve no choice.

I appreciate you replying to my posts. I really like the scrollbar on the link you gave, I unfortunately can’t replicate it even by copy/pasting the code from the site. I’m very new to CSS, so without a basic understanding of new things, there’s no starting point. Basic math has to be shown and explained before one can do geometry.

Best Regards.

[Anonymous]

Thanks Krish for your reply. I like the look of the scrollbar at the link you provided, but it seems slow. I don’t have even a basic understanding of how these work and have tried in vain to get someone to explain it with a simple demo. The site demos don’t really explain anything for me. I’m going to go with just long pages and have to settle for a crappy looking page or two on the site.

Best Regards.

[Anonymous]

Greetings Krish,

I really appreciate that! I’ve been busting my hump trying to figure these out and I’m just not getting it.

Best Regards.

[nixnerd]

I like this one:

http://noraesae.github.io/perfect-scrollbar/

[Anonymous]

Greetings Krish,

Well, I’ve managed to create a scrollbar and customize it like I want. I’ve incorporated it into my page. I now have two problems I can solve. First, the bottom scroll arrow does not show in IE8 and the cursor does not activate as it would if the button area was being sensed. Second, I’ve transferred all files and folders over to my server in an attempt to show what’s happening and the scrollbar does not show at all.

Suggestions?

Best Regards.

[Author]

Posts