Hide (horizontal) scrollbar

For a website I had to set the overflow to scroll on different elements.
Mostly I managed the scrollbars to not be visible with the trick of giving 20px padding and -20px margin.

But unfortunately this did not work on every browser.

I tried every custom code snippet I could find on that topic, but nothign worked.

Is there really no sure custom code you can for example set directly for the body to not show any scrollbars at all?

Here is my read only link:
https://preview.webflow.com/preview/covid-19-tipps?utm_medium=preview_link&utm_source=designer&utm_content=covid-19-tipps&preview=c552a0394d7d64caaf41e5c728c598da&pageId=6456d3671a9721a09833e146&workflow=preview


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

Can you go with this solution?

1 Like

on the problem page, under settings, in “inside head tag”, have you tried pasting code:

<style>
/*width*/
::-webkit-scrollbar {
  width:0px;
}

/*track*/
::-webkit-scrollbar-track {
  background:transparent;
}

/*thumb*/
::-webkit-scrollbar-thumb {
  background:transparent;
}
</style>
2 Likes

Thank u for the advice. Just tried it.
Posted this exact code in the head part of the custom code in the site settings (as far as I know this affects then all pages of the site.)

Does not work. Did I do something wrong?

Try setting a max height on the parent element (box), then add to parent element a Overflow-hidden.
on the child element where you applying overflow (overflow horizontal for example) add a padding with x(px). and that should solve your problem