所以我试图使用JavaScript滚动调用一个函数。但是我想知道我是否可以不使用jQuery检测滚动的方向。如果没有,有什么变通办法吗?

我想只放一个“顶部”按钮,但如果可以的话,我想避免这个按钮。

我现在刚刚尝试使用这段代码,但它不起作用:

if document.body.scrollTop <= 0 {
    alert ("scrolling down")
} else {
    alert ("scrolling up")
}

当前回答

如果有人想用React钩子实现它

  const [scrollStatus, setScrollStatus] = useState({
    scrollDirection: null,
    scrollPos: 0,
  });

  useEffect(() => {
    window.addEventListener("scroll", handleScrollDocument);

    return () => window.removeEventListener("scroll", handleScrollDocument);
  }, []);

  function handleScrollDocument() {
    setScrollStatus((prev) => { // to get 'previous' value of state
      return {
        scrollDirection:
          document.body.getBoundingClientRect().top > prev.scrollPos
            ? "up"
            : "down",
        scrollPos: document.body.getBoundingClientRect().top,
      };
    });
  }

  console.log(scrollStatus.scrollDirection)

其他回答

初始化一个oldValue 通过监听事件获取newValue 两者相减 从结果得出结论 用newValue更新oldValue

/ /初始化

let oldValue = 0;

//监听事件

window.addEventListener('scroll', function(e){

    // Get the new Value
    newValue = window.pageYOffset;

    //Subtract the two and conclude
    if(oldValue - newValue < 0){
        console.log("Up");
    } else if(oldValue - newValue > 0){
        console.log("Down");
    }

    // Update the old value
    oldValue = newValue;
});

你可以使用document.documentElement.scrollTop获取滚动条的位置。然后就是简单地将它与之前的位置进行比较。

修改Prateek的答案,如果lastScrollTop没有变化,那么它将是一个水平滚动(在x方向溢出,可以使用鼠标使用水平滚动条或使用滚动轮+ shift来使用。

const containerElm = document.getElementById("container");

let lastScrollTop = containerElm.scrollTop;

containerElm.addEventListener("scroll", (evt) => {
  const st = containerElm.scrollTop;

  if (st > lastScrollTop) {
    console.log("down scroll");
  } else if (st < lastScrollTop) {
    console.log("up scroll");
  } else {
    console.log("horizontal scroll");
  }

  lastScrollTop = Math.max(st, 0); // For mobile or negative scrolling
});

有时滚动行为不一致,不能正确更新元素的scrollTop属性。在决定滚动方向之前设置一些阈值会更安全。

let lastScroll = 0
let threshold = 10 // must scroll by 10 units to know the direction of scrolling


element.addEventListener("scroll", () => {
    let newScroll = element.scrollTop
    
    if (newScroll - lastScroll > threshold) {
        // "up" code here
    } else if (newScroll - lastScroll < -threshold) {
        // "down" code here
    }
    
    lastScroll = newScroll

})

使用这个来找到滚动方向。这只是为了找到垂直滚动的方向。支持所有跨浏览器。

var scrollableElement = document.body; //document.getElementById('scrollableElement');

scrollableElement.addEventListener('wheel', checkScrollDirection);

function checkScrollDirection(event) {
  if (checkScrollDirectionIsUp(event)) {
    console.log('UP');
  } else {
    console.log('Down');
  }
}

function checkScrollDirectionIsUp(event) {
  if (event.wheelDelta) {
    return event.wheelDelta > 0;
  }
  return event.deltaY < 0;
}

例子