Hide scrollbars while allowing scroll?

Ask us anything How do I?
1

Hi! I have been having trouble hiding the scrollbars (or customizing them in any way).

Usually something like this:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Would do the trick but in custom CSS and in all component settings I cannot find a way to hide the scroll bar whilst still being able to scroll. On tablet it’s always nice to have a thin scrollbar on the side as well so it would be great to be able to customise the scroll bar!

Thank you in advance for your help :slight_smile:

2 Likes
2

Hey @aeynaud !

You can add this example to the head in the settings.

<style>
* {
    &::-webkit-scrollbar-thumb {
    background-color: blue;
    border-radius: red;
}
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
    &::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background-color: transparent;
    }
}
</style>

It will only work on the published application

2 Likes
3

Hi @Kevin,

Thanks a lot for your answer!
Starting to get the hand of it :slight_smile:

Cheers

4

I’m having trouble getting that code to deploy - I’m a bit newer to CSS styling, so maybe I’m missing some pieces of this. Do you have a tutorial of how you got this to work (specifically removing the vertical scroll bar but still allowing scrolling)?

1 Like