CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
NicolasJEngler
NicolasJEngler

Reputation: 565

Check 'mousewheel' event direction with scroll locked

I currently have a slick slider on top of my page that should change slides on scroll, and after a certain point it should go back to normal scroll behaviour.

What I want to do is to initially lock the scroll (yeah, I know that changing scroll behaviour is a terrible thing for UX, but this was a mandatory request that came directly from the client), check the amount of times the scroll event was fired, check if it was up or down, and then switch slides accordingly.

My code currently looks like this:

$('body').on('DOMMouseScroll mousewheel', function(e) {
  var viewportHeight = $(window).height(),
      firstWaypoint = viewportHeight / 2,
      secondWaypoint = viewportHeight,
      thirdWaypoint = 3/2 * viewportHeight,
      unlockPoint = viewportHeight * 2,
      $slider = $('.home-hero__inner__text');

  if (/* Y scroll position < thirdWaypoint lock scroll */) {
    e.preventDefault();
  } else if (/* If Y scroll position < secondWaypoint show first slide */) {
    $slider.slick('slickGoTo', 0);
  } else if (/* If Y scroll position > secondWaypoint show second slide */) {
    $slider.slick('slickGoTo', 1);
  } else if (/* If Y scroll position > thirdWaypoint show third slide */) {
    $slider.slick('slickGoTo', 2);
  } else {
    // Unlock scroll
  }
});

The thing is that as I currently lock scroll capabilities using preventDefault(), I can no longer check my page scrollTop() position since it is always at the top, returning a 0 value.

Is there a way to check how many pixels should've been scrolled on normal behaviour, and whether it was up or down? 'cause I need to keep a track of the assumed scroll position to trigger each step of the if statement.

Upvotes: 2

Views: 1770

Answers (1)

adeneo
adeneo

Reputation: 318202

You could just check if the wheelDelta is positive or negative

$(document).on('DOMMouseScroll mousewheel', function(e) {
    var moved = e.originalEvent.wheelDelta || e.originalEvent.detail * -1 || 0;

    if (moved > 0) {
        // scrolled up
    } else if (moved < 0) {
        // scrolled down
    }

});

FIDDLE

Upvotes: 2

Related Questions