Streaming live at 10am (PST)

How to hide the scroll bar in a div block

I want to hide the scroll bar from this div block but whenever I put any custom ccs nothing works. Do I have to call out a specific tag or something before adding three styling?

I put this in the head tag and no luck, also tried it in custom attributes section

body { -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox } body::-webkit-scrollbar { display: none; // Safari and Chrome }

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

Hey Lorenza,

  1. You don’t need a custom code to disable scroll in a div. There’s the overflow property for that:

  2. Custom code as this one (css styling) do not go into the custom div attributes but in the <head> or before </body> as you wrote you did first.

  3. If you’ll share a read only link with your questions it will be easier to answer specifically for your project’s problem

I do not want to disable scrolling, I just want the scroll bar to not be visible when you are scrolling.

That is a messy business.
Every browser has it’s own code and style, and you might end up screwing your design and functionality. (IMO it is also bad UI. If you have a content that needs scrolling, the user needs to know it can be scrolled)

Anyway, you will need some custom code for that, and it needs to go in the pages panel, under page settings, in the custom code section.

Well, not exactly! You can simply move or widen your div with the scroll while it is inside the overflow-hidden parent to approximately hide the scroll. Approximately because different browsers have slightly different scrollbar width if I’m not mistaken.

Edit: to address @avivtech concern about not seeing the scrollbar - yes, it may be bad, but there are instances when this is not a problem. I did exactly this when creating interactive mobile screens with scrolling on my own portfolio site.

1 Like