首页 > 其他 > 详细

滚动条滚动方向

时间:2021-04-27 22:15:51      阅读:24      评论:0      收藏:0      [点我收藏+]
// 页面滚动监听事件
window.onscroll = function(e){
    scrollFunc();
    if(scrollDirection == ‘down‘){
        console.log(‘down‘)
    }
    else if(scrollDirection == ‘up‘){
        console.log(‘up‘)
    }else if(scrollDirection == ‘left‘){
        console.log(‘left‘)
    }
    else if(scrollDirection == ‘up‘){
        console.log(‘up‘)
    }
}
let scrollAction = {x: 0, y: 0}, scrollDirection = ‘‘;
// 判断页面滚动方向
function scrollFunc() {
    if (scrollAction.x == 0 || scrollAction.y == 0) {
    scrollAction.x = window.pageXOffset;
    scrollAction.y = window.pageYOffset;
    }
    let diffX = scrollAction.x - window.pageXOffset;
    let diffY = scrollAction.y - window.pageYOffset;
    if (diffX < 0) {
        // Scroll right
        scrollDirection = ‘right‘;
    } else if (diffX > 0) {
        // Scroll left
        scrollDirection = ‘left‘;
    } else if (diffY < 0) {
        // Scroll down
        scrollDirection = ‘down‘;
    } else if (diffY > 0) {
        // Scroll up
        scrollDirection = ‘up‘;
    } else {
        // First scroll event
    }
    scrollAction.x = window.pageXOffset;
    scrollAction.y = window.pageYOffset;
}

滚动条滚动方向

原文:https://www.cnblogs.com/zhenjianyu/p/14710949.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!