Disable scroll down with jQuery

Question

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

Thank you very much in advance

Try this question : http://stackoverflow.com/questions/11940351/jquery-tools-touch-horizontal-only-disable-vertical-touch — David Ansermot, Sep 03 '14 at 08:41
I only want to disable the down scrolling, not the up scrolling — Genzotto, Sep 03 '14 at 08:46

score 5 · Accepted Answer · answered Sep 03 '14 at 08:59

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

answered Sep 03 '14 at 08:59

Alex

9,911
5
33
52

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 03 '14 at 09:01
you can however take a look at https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel and adjust it to your needs – Alex Sep 03 '14 at 09:30
You forgot the touch events. But your answer is pretty cool. – Ismael Miguel Sep 03 '14 at 09:46
Thank you Alex, you helped me to solve this problem. I finally did it in [this way](http://stackoverflow.com/questions/25639865/disable-scroll-down-with-jquery/25641204#25641204) – Genzotto Sep 03 '14 at 09:50

score 1 · Answer 2 · answered Sep 03 '14 at 09:49

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;
    }
});

Disable scroll down with jQuery

2 Answers2