所以我试图使用JavaScript滚动调用一个函数。但是我想知道我是否可以不使用jQuery检测滚动的方向。如果没有，有什么变通办法吗?
我想只放一个“顶部”按钮，但如果可以的话，我想避免这个按钮。
我现在刚刚尝试使用这段代码，但它不起作用:
if document.body.scrollTop <= 0 {
alert ("scrolling down")
} else {
alert ("scrolling up")
}
当前回答
这是对prateek的回答的补充。在IE的代码中似乎有一个小故障，所以我决定修改它一点也不花哨(只是另一个条件)
$('document').ready(function() {
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
console.log("down")
}
else if(st == lastScrollTop)
{
//do nothing
//In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
}
else {
console.log("up")
}
lastScrollTop = st;
});});
其他回答
我个人使用这段代码来检测javascript中的滚动方向… 你只需要定义一个变量来存储lastscrollvalue，然后使用这个if&else
let lastscrollvalue;
function headeronscroll() {
// document on which scroll event will occur
var a = document.querySelector('.refcontainer');
if (lastscrollvalue == undefined) {
lastscrollvalue = a.scrollTop;
// sets lastscrollvalue
} else if (a.scrollTop > lastscrollvalue) {
// downscroll rules will be here
lastscrollvalue = a.scrollTop;
} else if (a.scrollTop < lastscrollvalue) {
// upscroll rules will be here
lastscrollvalue = a.scrollTop;
}
}
初始化一个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;
});
如果有人想用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)
捕捉所有滚动事件(触摸和滚轮)的简单方法
window.onscroll = function(e) {
// print "false" if direction is down and "true" if up
console.log(this.oldScroll > this.scrollY);
this.oldScroll = this.scrollY;
}
你可以使用document.documentElement.scrollTop获取滚动条的位置。然后就是简单地将它与之前的位置进行比较。
