Scrolling Without a Scrollbar on a HTML Page - html

Question

In a website I am making, the scrollbar is messing up the horizontal alignment of my page, so I can use ;
html,body{
overflow-y:hidden;
}
But how can I still let the page scroll (just without showing the scrollbar)?

Answer 1

If you want a pure CSS solution than below snippet will help you achieve that with an ease
::-webkit-scrollbar {
display: none;
}
Demo (Only Chrome or Safari)
But since this is for webkit browsers only, you might have to use JS for a cross browser solution.

Answer 2

I think disable the scrollbar is not the solution, because in that case, you will need to find another solution to actually scroll the page...
like up & down keys, or make a mouse selection and go down...
...which is not an elegant solution in my opinion.
(not to mention that only will be affected webkit based browsers)
Instead, I suggest to fix your style so then the scrollbars will not screw up your layout.
One approach (without knowing your code, only guessing) is to use the box-sizing attribute.
Like:
#id {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
}
So with this, the width that you are giving to that #id will be recalculate when the margin, padding or the border changes.
But again.. only guessing, if you want to show the code that is affected by the scrollbars, we can find a proper solution for this.