CODEWITHSUNDEEP
javascript
ClementBresson
ClementBresson

Reputation: 55

Handle Scrolling between full page section, with overflow:hidden on body

I would like to create exactly the same scrolling effect than tho one you can see on this website : http://blkboxlabs.com/

Do you have any idea how to implement it?

The problems I struggle with are:

Upvotes: 0

Views: 92

Answers (1)

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

There's a simple way to do it. The body wraps the principal div that you can move with positioning absolute / fixed and top. You can detect mousewheel events with a jquery plugin.

The plugin: http://plugins.jquery.com/mousewheel/

The example code:

 <body>
    <div class="allcontent"></div>
 </body>

CSS 

 body { overflow: hidden; }
 .allcontent {position: absolute; top:0; }

JS

 $('.allcontent').on('mousewheel', function(event) {
     console.log(event.deltaX, event.deltaY, event.deltaFactor);
 });

Good luck!

Upvotes: 1

Related Questions