Streaming live at 10am (PST)

How to implement a custom (jQuery) scrollbar?

Hello, Webflowers!

I dislike the default scrollbar on Windows, so I wanted to change it somehow — it would be really great to make it similar/the same as a scrollbar on Mac. I found Finsweet’s custom scrollbar Chrome extension very useful and it does the job for the most part. However, the problem is that scrollbars aren’t a part of the website, they are added to the sides and a website’s content is moved to the left side a bit because of this. Also, most people had a horizontal scrollbar issue when everything was perfect, but that scrollbar still appeared — it happens most likely because of 100vw on an element. Viewport width doesn’t consider scrollbars as a part of the website, so the horizontal scrollbar appears because, well, there is some content that needs to be shown. In this case, people will use % instead of vw.

That being said, I didn’t want to agree with this way, also I wanted to make the scrollbar part of the website, so it wouldn’t move the content to the side a little bit, but will appear only on a scroll or hover over the right side of the screen — so I decided to find a solution.

I found a custom code that allows removing the scrollbar entirely — seems to work perfectly! Though, I want to have scrollbars because of accessibility and stuff like that.

I’ve stumbled upon Malihu’s jQuery custom scrollbar and Overlay Scrollbars, but I didn’t understand how to implement it on my website — I would love to add a “minimal dark” custom scrollbar.

It is worth noting that I want to apply these custom scrollbars to the “select” and “text-area”, but most importantly to the “body”.

Moreover, I’ll be really glad if someone gives a link or explains how to add jQuery stuff in Webflow. I’m not really good with coding, hence the inability to add that custom scrollbar, heh.

Thank you for your replies in advance!

P.S: An additional link with Malihu’s custom scrollbar examples.

A search for jQuery in Google produces 151 million results. Certainly has plenty of tutorials in that mix. Take a look!

Haha, thanks, Jeff! Immense help, lol.

Well, I did Google, of course, however, my lack of JS understanding didn’t help enough. I’ve read the documentation on one of those scrollbars scripts, but didn’t understand how to add it to the website — I mean it was all about JS. Maybe I took the wrong approach. Anyway, thanks for the passive-aggressive reply, haha. No worries, btw — I do understand the feelings when people ask quite stupid questions.

Hi @GeorgyDesign I understand frustration when you do not understand how to code, as we all have been there and we have all invested our time to learn. That’s why you get appropriate answer to your question. What I mean when you do not understand how JS works any detail description will be not beneficial to you as you would not know what we are talking about. We trying to help but not to teach.

Anyway, if you have did your homework to find how to manipulate scrollbars you have definitely come across styling scrollbars with CSS. Just mentioning this as your library was last time updated 7 years ago. That’s like 100 years in web dev this mean that web technologies are moving fast forward.

I have find for you one article that may give you an idea how to style your scrollbars just with CSS

I hope that this article will be beneficial for you.

About jQuery, jQuery is already implemented in WF so feel free to use any jQuery or JS code in embed element. More information about this element can be find on Webflow University or here on this forum by using a search field.

1 Like

Thanks a lot for the help, Stan!

I did start learning HTML & CSS, and some bits of JS to be able to fully understand the code I add on websites. The article you’ve sent is similar to the one on the CSS-Tricks website, still thanks for the article nevertheless!

Not gonna lie, it feels great to be able to understand the code haha.

Also, I did add those custom scrollbars to page’s custom code, not the embed element, so I’ll try doing that.

Again, thanks for the reply!

1 Like

Hi @GeorgyDesign placing custom code to page settings is fine too. There are actually 3 places where to apply custom code.

  1. Project setting (code applied on whole site)
  2. Page setting (code applied on current page)
  3. Embed code element (code applied on current page and/or element)

When testing or developing you can use Embed and when all works as expected move your code to page or project settings.

Yeah, I just didn’t manage to add it properly so it would work. Well, I’m gonna do it with new knowledge.