方法一：使用变量记录上次滚动位置
1 2 3 4 5 6 7 | window.addEventListener('scroll', function() { const currentScroll = window.pageYOffset || document.documentElement.scrollTop; if (currentScroll > lastScrollTop) { // 向下滚动 console.log('向下滚动'); } else if (currentScroll |
方法二：使用更精确的 delta 值判断
1 2 3 4 5 6 7 | window.addEventListener('scroll', function() { const currentScrollPosition = window.pageYOffset; const scrollDelta = currentScrollPosition - lastScrollPosition; if (scrollDelta > 0) { console.log('向下滚动', scrollDelta); } else if (scrollDelta |
方法三：使用 requestAnimationFrame 优化性能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | let ticking = false;window.addEventListener('scroll', function() { lastKnownScrollPosition = window.scrollY; if (!ticking) { window.requestAnimationFrame(function() { const current = lastKnownScrollPosition; const direction = current > (lastKnownScrollPosition || 0) ? 'down' : 'up'; console.log(direction); ticking = false; }); ticking = true; }}); |
拓展：JS获取页面滚动距离
1，element.scrollTop
获取或设置一个元素的内容垂直滚动的像素数。
1 2 3 4 5 | // 获得滚动的像素数const intElemScrollTop = element.scrollTop;// 设置滚动的距离element.scrollTop = intValue; |
2，window.scrollY 和 window.pageYOffset
返回文档在垂直方向已滚动的像素值。但 window.pageYOffset 兼容性更好。
1 | window.pageYOffset === window.scrollY; // true |
3，获取页面滚动距离
最兼容性的写法：
1 2 3 | const useScrollTop = () => { return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;} |
这也是 skrollr 库使用的写法。
到此这篇关于JavaScript判断页面滚动方向的三种方法的文章就介绍到这了,更多相关JS判断页面滚动方向内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
