可滚动 div：如何从可滚动 div 的 OnScroll 事件检测滚动方向？

Question

如何从 OnScroll 事件检测可滚动 div 的滚动方向？如果用户向上滚动，我想向scrollTop 添加 15；如果用​​户向下滚动，我想向scrollTop 添加 15。不使用JQuery 可以吗？

Answer 1

JSFIDDLE

/**
 * Calculate incremental amounts of pixels scrolled in each axis.
 * Value is signed to its direction.
 */
function incrementalScroll(e) {

    var scrollX = (this.x || window.pageXOffset) - window.pageXOffset;
    var scrollY = (this.y || window.pageYOffset) - window.pageYOffset;

    this.x = window.pageXOffset;
    this.y = window.pageYOffset;

    test(scrollX, scrollY);
}

window.onscroll = incrementalScroll;

根据需要使用它。

function test(scrollX, scrollY){

    var directionX = !scrollX ? "NONE" : scrollX>0 ? "LEFT" : "RIGHT";
    var directionY = !scrollY ? "NONE" : scrollY>0 ? "UP" : "DOWN";

    console.log(directionX, scrollX, directionY, scrollY);
}

Answer 2

我能想到的最简单的方法如下。如果您可以将 let oldScroll 包装到一个闭包中以使其更清晰，那就太好了，但这不是必需的。

const scrollableEle = document.getElementById('scrollable-ele')
let oldScroll = scrollableEle.scrollTop

scrollableEle.addEventListener('scroll', doSomething)

function doSomething(e) {
  contentRight.scrollTop > oldScroll ? /* down */ : /* up */
  oldScroll = scrollableEle.scrollTop
}