▼
Streaming live at 10am (PST)

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

Design help Custom code
#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:

5 Likes
#3

Works flawlessly! :heart_eyes: Check it out.

Thank you @mistercreate.

1 Like
#4

Awesomeness!

Glad I could help! :bowing_man:

2 Likes
#5

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

Thanks!

1 Like
#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>
4 Likes
#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 settings → custom code , enter your code in the head code section, and save the changes .

5ac77e05b89a7771edeb9c26_Head-Code.png1832×976

3 Likes
#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.

2 Likes
#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.

1 Like
#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:

2 Likes
#11

@PiterDimitrov
Thanks. It worked!

2 Likes
#12

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

#13
1 Like
#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.

#15

Will this work if the scroll is inside of a div box? Nothing seems to happen when I add the code. Do I have to tag that specific area or something?

#16

Where did/do you place this?

#17

Thanks! This worked for me for the browsers on desktop. However, on my ipad and mobile devices, the browser scrollbar is still visible. Does anyone have a code for that?

2 Likes
#18

Bump… I am also extremely interested in the answer to Yin’s question. Does anyone have this code? Or @Yin if you were able to figure this out, this would be a huge timesaver. Thank you!

#19

Hey @mistercreate

Based on your solution I have made a PR and asked my teammate to review and they said that its not good and they have pinged me this URL. Their is a warning not to use -ms-overflow-style: none; (https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style)? Can you please let me know your opinion.

#20

Hey @mistercreate

Based on your solution I have made a PR and asked my teammate to review and they said that its not good and they have pinged me this URL. Their is a warning not to use -ms-overflow-style: none; (https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style)? Can you please let me know your opinion.