scrollbar-width: none; VS overflow-x: hidden

Question

It seems that I can use both these to hide the horizontal scrollbar of an element:

overflow-x: hidden;

scrollbar-width: none;

Which one is the better solution for hiding the horizontal scrollbar?

Answer 1

overflow-x: hidden will clip any content inside a parent element (say the page) that has a width that overflows out of the parent and prevent the user from scrolling horizontally. Source

scrollbar-width: none hides the scrollbar however the content will still be scroll able. Source

So it depends upon what you are trying to achieve.

Answer 2

With scrollbar-width: none; the scrollbar is still present and you can still scroll if there is overflow, if you want to disable scrolling at all use overflow: hidden;