How do I hide auto horizontal scrollbar from appearing on mobile when a user scrolls?

Design help General
1

Hi,
I have a horizontal scroll set with Auto on mobile but a scrollbar line appears. How can I hide this scrollbar?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Please add screenshot (hard to understand your issue).

In general - overflow-x for now, added only by custom code:

4

Thank you but I tried that from another persons topic and it only worked for desktop.

5

I cant screenshot a scrollbar appearing on my mobile. As an example: you want to scroll images on a horizontal scroll. A scrollbar appears.

6

On mobile their is and option to print screen. Sorry no way to help you like this.
Why you want to hide the scrollbar?

7

It looks bad and the client has requested it.

8

Do you know what I mean by horizontal scrolling content?

9

Again this is why the best idea is to add a screenshot.
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp

<style>
body{
  overflow-x: hidden;
}
</style>

In general, remove any way to scroll horizontally (But will hide overflow content).

1 Like
10

@siton-systems Your suggestion didn’t work. We found the solution. Here it is for anyone with the same issue.
Go to > project settings > custom code > head code
Paste this code and change the .element name to the element name in your webflow project that is set to Auto for scrolling

<style type="text/css">
body {
  -webkit-font-smoothing: antialiased;
}      

     /* Hide Horizontal Scrollbar on Auto scroll carousel */
  .Subnav-Container::-webkit-scrollbar{
   		 width: 0px;  /* Remove scrollbar space */
   		 background: transparent;  /* Optional: just make scrollbar invisible */
		}
</style>
1 Like
11

Next time add screenshot/read-only-link -o-r live URL for faster / more-accurate answers (“how to save world?”).

12

I don’t want to disable scroll just hide scrollbar. this works

13

For future users - this is the topic of this Q: (red area - overflow-x element - scroll set to auto ==> remove the horizontal on scrollbar)

image
image802Ă—723 43.7 KB

Stackoverflow related:

14

@siton_Systems :rofl: :rofl: :rofl: :rofl:

15

@sitcon_Systems I think you need to listen to this wonderful song from Frozen. Let it go…let it go FROZEN | Let It Go Sing-along | Official Disney UK - YouTube

1 Like
16

would this go in the header of custom code? I am looking to do the same thing. If you would like to check this out on mobile, you can see what I mean. I have a few rows and each tab on the row scrolls left to right

17

copy-paste before body (under site setting (For entire site) / or page setting (Per page)) - publish and test

<style>
/* remove-horizontal-scroll-bar-on-mobile */
::-webkit-scrollbar {
display: none;
}
</style>

Related:

18

Awesome. Thank you very much. where would I be able to source stuff like this my self? Say i want to get rid of the side scroll too?