关于html：Scrollable div：如何从OnScroll事件中检测可滚动div的滚动方向？


Scrollable div : how to detect scroll direction from OnScroll event for a scrollable div?

如何从OnScroll事件检测可滚动div的滚动方向？ 如果用户向上滚动，我想将15加到scrollTop上，如果用户向下滚动，我想减去15。 是否可以不使用JQuery？

相关讨论

JSFIDDLE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 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;

根据需要使用它。

1
2
3
4
5
6
7
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);
}

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

1
2
3
4
5
6
7
8
9
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
}