Streaming live at 10am (PST)

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

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)

Please add screenshot (hard to understand your issue).

In general - overflow-x for now, added only by custom code:
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp

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

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

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

It looks bad and the client has requested it.

Do you know what I mean by horizontal scrolling content?

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

@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>

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

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

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

Stackoverflow related:

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

@sitcon_Systems I think you need to listen to this wonderful song from Frozen. Let it go…let it go https://youtu.be/L0MK7qz13bU

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

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:

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?