Open haizhilin2013 opened 4 years ago
function debounce(fn, wait) {
let timeout = null;
return function() {
if(timeout !== null)
clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
const $wrapper = document.getElementById('wrapper')
let [x,y] = [0, 0]
const halfHeight = ($wrapper.offsetHeight / 2) + 17
const halfWidth = ($wrapper.offsetWidth / 2) + 17
const handle = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
if (scrollLeft > x) {
if (scrollLeft === halfWidth) console.log('向右滚动到底')
else console.log('向右滚动')
} else if (scrollLeft < x) {
console.log('向左滚动')
}
if (scrollTop > y) {
if (scrollTop === halfHeight) console.log('向下滚动到底')
else console.log('向下滚动')
} else if (scrollTop < y) {
console.log('向上滚动')
}
x = scrollLeft
y = scrollTop
}
window.addEventListener('scroll', debounce(handle, 200))
var lastScrollTop = 0, lastScrollDirection;
var event = new Event('scroll-direction-change');
scroller.addEventListener("scroll", function(e) {
var scrollTop = e.target.scrollTop;
var direction = scrollTop - lastScrollTop > 0 ? 1 : -1;
if (lastScrollDirection !== direction) {
event.direction = direction;
scroller.dispatchEvent(event);
lastScrollDirection = direction;
}
lastScrollTop = scrollTop;
});
scroller.addEventListener("scroll-direction-change", function(e) {
console.log(e.direction > 0 ? '向下滚' : '向上滚', e);
});
if (window.onwheel) {
scroller.addEventListener("wheel", function(e) {
console.log(e.deltaY > 0 ? '向下滚' : '向上滚');
});
} else if (window.onmousewheel) {
scroller.addEventListener("mousewheel", function(e) {
console.log(e.wheelDelta < 0 ? '向下滚' : '向上滚');
});
} else if (window.MouseScrollEvent) {
scroller.addEventListener("DOMMouseScroll", function(e) { // Firefox
console.log(e.detail > 0 ? '向下滚' : '向上滚');
});
}
第230天 写一个方法判断页面滚动方向
我也要出题