Hide scrollbar / remove scrollbar

Question

I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/

As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).

I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.

If anyone can point me to the right direction, that would be really awesome!

Answer 1

I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.

body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.

Answer 2

It seems like a slightly altered take on Parallax Scrolling.

If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.

Answer 3

Change overview.css on line no 10

 position: fixed;

Remove following from overview.css on line 415 and 8

 overflow: hidden;

Answer 4

Just add the code below to your css file.

::-webkit-scrollbar { 
    display: none; 
}

Caution ! This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.