Прокручиваемый div: как определить направление прокрутки по событию OnScroll для прокручиваемого div?

Question

Как определить направление прокрутки для прокручиваемого div, из события OnScroll? Я хочу добавить 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
}