js判断滚动条滚动方向
//第一种写法
var a;
function scroll( fn ) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) {
// console.log(direction);
a = direction;
});
// 第二种写法
var a;
function scroll( fn ) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
a = fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) {
// console.log(direction);
return direction;
});
// 第三种写法------这样写不知道fn这个函数的用意,那样写很明白就清楚fn的意思了,是执行完事件后的回调函数
var a;
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if( delta === 0 ) return false;
fn( delta > 0 ? "down" : "up" );
beforeScrollTop = afterScrollTop;
}, false);
function fn(direction) {
// console.log(direction);
a = direction;
};
window.onscroll=function(){
console.log(a);
}
今天在做类似于京东、天猫楼层切换效果的时候,利用循环实现,需要执行一个iscroll的方法,可是这个方法却只能在满足条件的时候执行一次,而不是每次滚动都能够实现,所以就想到要判断滚动条滚动方向,所以就搜了这么一段代码,因为涉及到js闭包的知识,本人就挂了,对闭包真的是不懂,多亏问了文杰同学,理解了这么一段代码,写下来,记录一下。
(虽然最终这个效果并不需要判断滚动条滚动方向,是自己的逻辑发生了错误)。