CODEWITHSUNDEEP
jqueryscrollmousewheel
user1677581
user1677581

Reputation:

jQuery window scroll snapping

Okay, so what im trying to do is have a page with panels that span 100% of width and height.

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

Body will be overflow:hidden. what I'm trying to do is everytime the user scrolls a certain amount, let's say a swipe or a half spin of the wheel, then it scrolls to the next panel. so It's like a deck that takes the next element into the viewport.

The way I've handled it is like this: but i cant figure out a way to not make the scroll function fire a million times.

here's my JS: ugly I'm also using the mousewheel plugin.. i was thinking perhaps somehow for every x delta amount then it fires the scroll animation. But I'm not really sure how to achieve it!

var scrollAmt = 0;
        $(window).on('mousewheel', function(event, deltaY){
            $('.projects').addClass('scrolled');
            if(event.originalEvent.wheelDelta > 0) {
                //down  
                    scrollAmt = scrollAmt -= $winHeight;
                    console.log(scrollAmt);
                    $('.projects').animate({marginTop: ''+ scrollAmt +'px'}, 2000);

            } else {
                if ($totalComputed === scrollAmt ){
                    console.log('last');
                } else {

                        scrollAmt = scrollAmt += $winHeight;
                        console.log(scrollAmt);
                        $('.projects').stop().animate({marginTop: '-'+ scrollAmt +'px'}, 2000);

                }
            }
        });

i've tried doing stuff with if and else statements but i just end up on square one.

I'm trying to achieve something like http://mirkoborsche.com

Any help much appreciated!

Best,

Upvotes: 2

Views: 2675

Answers (2)

Lowkase
Lowkase

Reputation: 5699

Unbind and rebind the scroll event to ensure the scroll event won't fire during certain times:

The pattern is something like this:

$(window).on('mousewheel', processMouse(event, deltaY);

function processMouse(event, deltaY){

    if(event.originalEvent.wheelDelta > 0) {
        // Unbind the mousewheel event
        $(window).off("mousewheel");
        // Do some things like scrolling the page to the next waypoint
    } else {
        // Rebind the mousewheel event
        $(window).on('mousewheel', processMouse(event, deltaY);
    }
}

Upvotes: 0

Noahdecoco
Noahdecoco

Reputation: 211

I think you could get the job done using this plugin: https://github.com/alvarotrigo/fullPage.js.

Also, it seems to be actively updated. The last commit to the repo was made 3 days ago.

Cheers!

Upvotes: 1

Related Questions