檢測左滾動JavaScript

Question

當div向左滾動時，我會添加什么代碼來觸發代碼塊？

<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>

到目前為止，我嘗試了以下無濟於事：

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

Answer 1

如前所述在這里您可以通過處理水平滾動：

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

在這種情況下，這將綁定此元素上的所有類型的滾動事件，以便您也可以處理

通過e.currentTarget.scrollTop垂直

和

由e.currentTarget.scrollLeft水平

Answer 2

此解決方案將檢測DOM事件。 div不需要有一些滾動條

您應該能夠使用此代碼段檢測滾動方向：

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

它應該適用於所有瀏覽器。 如果需要檢測水平方向，請將wheelDeltaX替換為wheelDeltaY

如果要檢測滾動方向並讓頁面滾動，請在結尾處return true