3

Is there any way to disable only scroll down in jQuery?

Thank you very much in advance

3

2 Answers 2

5
$('html, body').bind('DOMMouseScroll mousewheel MozMousePixelScroll', function(e) {
    var scrollTo = 0;

  if (e.type == 'mousewheel') {
      scrollTo = (e.originalEvent.wheelDelta * -1);
  }
  else if (e.type == 'DOMMouseScroll') {
      // scrollTo = 20 * e.originalEvent.detail; // turns out, this sometimes works better as expected...
      scrollTo = e.originalEvent.detail;
  }

  if (scrollTo > 0) {
    e.preventDefault();
    return false;
  }
});

Here you have a working fiddle

4
  • i made the experience that scrollTo = 20 * e.originalEvent.detail; needs a little adjustment, I dont know anymore why I multiply it with 20 :)
    – Alex
    Sep 3, 2014 at 9:01
  • you can however take a look at developer.mozilla.org/en-US/docs/Web/Events/mousewheel and adjust it to your needs
    – Alex
    Sep 3, 2014 at 9:30
  • You forgot the touch events. But your answer is pretty cool. Sep 3, 2014 at 9:46
  • Thank you Alex, you helped me to solve this problem. I finally did it in this way
    – Genzotto
    Sep 3, 2014 at 9:50
1

Following Alex's answer, I managed to do it in the next way:

$(window).on('DOMMouseScroll mousewheel MozMousePixelScroll', function(e) {
    var direction = 0;
    if (e.type == 'mousewheel') {
        direction = (e.originalEvent.wheelDelta * -1);
    } else if (e.type == 'DOMMouseScroll') {
        direction = e.originalEvent.detail;
    }
    var divHeight = $("#myDiv").height();
    var scrollTop = $(this).scrollTop();
    if (direction > 0 && scrollTop > divHeight - window.innerHeight) {
        e.preventDefault();
        return false;
    }
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.