Detect Left Scroll JavaScript

user_8624725 0
Viewed 2357

What code would I add to trigger a block of code when the div is being scrolled left?

<script>
(function () {
    function scrollH(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('myDiv').scrollLeft -= (delta * 40);
        e.preventDefault();
    }
    if (window.addEventListener) {
        window.addEventListener("mousewheel", scrollH, false);
        window.addEventListener("DOMMouseScroll", scrollH, false);
    } else {
        window.attachEvent("onmousewheel", scrollH);
    }
    if "scrollingLeft" {
        // do something
    }
    else
    {
        // do something else
    }
})();
</script>

So far I have tried the following to no avail:

var isleft = e.delta < 0;
if isleft = true { do something }
javascript
2 Answers

As stated here You can handle horizontal scrolling by :

$("#someContainer").on("scroll", function (e) {
    horizontal = e.currentTarget.scrollLeft;
    vertical = e.currentTarget.scrollTop;
});

In this case this bind all kind of scroll events on this element so you can also handle

Vertical by e.currentTarget.scrollTop

and

Horizontal by e.currentTarget.scrollLeft

user_23879340

This solution will detect the DOM event. The div doesn't need to have some scrolling bars

You should be able to detect the scroll direction with this snippet :

$(window).on('DOMMouseScroll mousewheel', function (e) {
  if(e.originalEvent.detail > 0 || e.originalEvent.wheelDeltaX < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
    //scroll right
    console.log("RIGHT");
  } else {
    //scroll left
    console.log("LEFT");
  }

  //prevent page fom scrolling
  return false;
});

It should work with all browsers. If you need to detect horizontal direction, replace wheelDeltaXwith wheelDeltaY

If you want to detect the scroll direction and let the page scroll, return trueat the end

user_5687170
Related