Scroll section without scrollbars

Hello,

Just having some difficulty finding anything on the forums that could really help me out. Below I attached a GIF of what I am working on and it comes down to this. I need that section to scroll but without scroll bar on the side. I am open to any ideas.

I have attempted using custom code that I have found on the forums, however, it did not work. Perhaps I was not using the correct code? I am very new to any coding at all.

I am open to creating a container within a section and somehow scrolling with animations, I simply have no idea how to go about that. I would like it is as responsive as possible as well and feel like that could be troublesome in this situation.

Bottom line, scrolling without scroll bars.

Thank you so much in advance! I appreciate everyone who helps out here so much!

Konrad

https://scrollbar-testing.webflow.io/

https://preview.webflow.com/preview/scrollbar-testing?utm_medium=preview_link&utm_source=dashboard&utm_content=scrollbar-testing&preview=340a15e9101c55ee854704252ec2ca71&mode=preview

Scrolling%20without%20scrollbars

Hey Konrad, what browser and OS are you using? I tested your test URL on Safari and Chrome (on Mac) and don’t see any permanent scroll bars.

@caicardenas I use Firefox so that could be why. Any way to eliminate it on Firefox? Just want to clarify, you can scroll through all 3 headings without the scroll bars being there? Thank you for the quick response too :slight_smile:

There is a scroll bar when I scroll, but it acts like all websites (again, Mac specific I believe) in that it appears as I scroll, and then disappears once the scrolling stops. It’s not a permanent scroll bar.

I’m not sure what is causing the scroll bars that you see, it may be Firefox or something else, and unfortunately I don’t know how to fix that. Have you tried testing in different browsers?

You don’t see the scrollbar because in the mac settings you set up your scrollbars to be visible only while scrolled.

@Konrad_Baj The easiest way is to just move your scrollable section behind the hidden overflow for the parent section.

Here is how you do it:

  • give your section an overflow:hidden and remove max-height from it
  • replace your container with simple div
  • give this div a max-height, set its overflow to auto and make its right margin to be -20px (-17 may also work)

Done

1 Like

@dram I appreciate the help so much! Thank you, it worked! Will post final website soon for anyone else looking for this.