Streaming live at 10am (PST)

How do I hide the browser scrollbar from appearing when a user scrolls?


#1

I am building a website that scrolls on the left side of the screen while the right side pans as you scroll. My current issue is the left aligned div, which I have set to “Auto Scroll”, shows a scrollbar in the middle of the screen. You can see it here: http://topherdigital.webflow.io/

When you scroll, I would like the scrollbar that appears in the middle to be hidden at all times. I imagine this solution will come from custom code, so I’ve categorized it accordingly.

Best,
Chris Travers


#2

Hi Chris,

Great question, and I hope I can provide a solid solution. :nerd_face:

I would suggest adding the following as custom CSS code:

.left {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}

.left::-webkit-scrollbar {
    display: none; // Safari and Chrome
}

The above solution was found at the following URL: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll

Hopefully this is helpful :bowing_man:


#3

Works flawlessly! :heart_eyes: Check it out.

Thank you @mistercreate.


#4

Awesomeness!

Glad I could help! :bowing_man:


#5

Hey,
I am a new webflow user. Can you please specify where exactly this custom code needs to be added?

Thanks!


#6

Hello @d.Occ

You need to add the CSS code in the head tag :webflow_heart:

<style>
.left {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}

.left::-webkit-scrollbar {
    display: none; // Safari and Chrome
}
</style>

#7

Hi @d.Occ,

Good question

If you have a premium Webflow account or if your project has an active Webflow site plan, you can add custom code and scripts that are applied to your entire site or to individual pages in your site: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

Code that is entered in the Head tag is applied to your entire site and is a way to link external resources, add meta data, and use custom styles in your document.

In Project settingscustom code , enter your code in the head code section, and save the changes .


#8

Seeing this thread get bumped makes me want to go back and finish that unfinished project that’s linked! I was never was able to figure out how to get those panes to pan in and out like I wanted :stuck_out_tongue:. Happy to see people are still getting answers from this thread, though.


#9

Thanks for your prompt assistance! @PiterDimitrov & @mistercreate

I have added the custom CSS code in the head tag but still, the browser scrollbar appears.

Here is the read-only link
https://preview.webflow.com/preview/designoccult?utm_source=designoccult&preview=ca9cd95e2ab142071743631331fd6557

published link

Any help would be much appreciated!
Thank you.


#10

Hello @d.Occ

You can see that the code has a class > .left

<style>
.left {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}

.left::-webkit-scrollbar {
    display: none; // Safari and Chrome
}
</style>

If you want you can target the body without classes. Just use

<style>
body {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}

body::-webkit-scrollbar {
    display: none; // Safari and Chrome
}
</style>

Hope this helps :webflow_heart:


#11

@PiterDimitrov
Thanks. It worked!


#12

Hello @PiterDimitrov,
It works for all the browsers except Mozilla Firefox.
Any idea how it can be resolved?


#13

#14

Thanks for sharing this article, @webdev.

I have tried using overflow: hidden instead of -moz-scrollbars-none .
But still, the scrollbar appears on Mozilla Firefox.