Javascript 页面上下滚动动画事件

我试图建立一个网站，当用户向上或向下滚动页面时，自动滚动到每个部分。我已经尝试解决这个问题好几个星期了，如果能在这件事上得到任何帮助，我将不胜感激。我相信问题是因为事件处理程序是一个scroll事件，它触发了一个scroll函数，这会导致出现多个scroll。我读过很多讨论这个主题的文章，解决方案似乎是添加一个setInterval或setTimeout函数，但我尝试了这两个函数，仍然没有结果

var page = $("#page_container");
var home = $("#home");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#bio");
var pages = [home, musicians, athletes, politics, bio];
var scrolled = false;
var pageCur = 0;
var lastScrollTop = 0;

page.scroll(function () {
    scrolled = true;
});

var scrollTimeout = setInterval(function () {
    if (scrolled == true) {
        pageScroll();
    }
    else {
        clearTimeout(scrollTimeout);
    }
}, 3000);

function pageScroll() {
    if (scrolled == true) {
        scrolled = false;
        var st = page.scrollTop();
        var pageNex = pageCur + 1;

        if (st > lastScrollTop) {
            alert(pageNex);
            pages[pageNex].velocity("scroll", {container: $("#page_container")});
        } else {
            alert(pageCur - 1);
            pages[pageCur - 1].velocity("scroll", {container: $("#page_container")});
        }
        lastScrollTop = st;
        pageCur = pageNex;
        alert("1");
        clearTimeout(scrollTimeout);

    }
}

确实设置了超时：） 我想你已经接近解决方案了。 请尝试以下小代码：

page.on('mousewheel', function (e) {
          e.preventDefault();
          if(Timeout)  
            return //if Timout == TRUE, then stop this function
          Timeout = true //if Timout == FALSE, set TRUE and then execute
          pageScroll(e) //scrollfunction to be called, Scrolling all the way!! YEAAH
          setTimeout(function(){Timeout = false},250)//Set Timeout to False after 0.25s
        });

function pageScroll(e) {
        var st = page.scrollTop();
        var pageNex = pageCur + 1;
    if (st > lastScrollTop) {
        alert(pageNex);
        pages[pageNex].velocity("scroll", {container: $("#page_container")});
    } else {
        alert(pageCur - 1);
        pages[pageCur - 1].velocity("scroll", {container: $("#page_container")});
    }
    lastScrollTop = st;
    pageCur = pageNex;
    alert("1");
    e.preventDefault();
}

检查工作示例

希望有帮助：）

---

编辑：添加了一把工作小提琴

我注意到您正在使用velocity，但我不熟悉该插件。这是一个纯jquery实现，不使用

setInterval

/

setTimeout

：

    var page = $("#page_container");
    var home = $("#home");
    var musicians = $("#musicians");
    var athletes = $("#athletes");
    var politics = $("#politics");
    var bio = $("#bio");
    var pages = [home, musicians, athletes, politics, bio];
    var positions = [];
    $.each(pages, function (k, page) {
        positions.push(parseInt(page.position().top));
    });
    //make sure we dont try to scoll while scrolling
    var scrolling=false;
    $(page).on("mousewheel DOMMouseScroll", function (event) {
        event.preventDefault();
        if (scrolling===true) {
            return false;
        }
        scrolling=true;
        var scrollTop = $(window).scrollTop();
        var scrollTo = -1;
        if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
// scroll up, find the HIGHEST position on the page LOWER than our scroll
            $.each(positions, function (k, position) {
                if (position < scrollTop) {
                    scrollTo = position;
                }
            });
        }
        else {
            // scroll down, find the LOWEST position HIGHER than our scroll
//since the list is sorted, stop on the first one
            $.each(positions, function (k, position) {
                if (position > scrollTop) {
                    scrollTo = position;
                    return false;
                }
            });
        }
        if (scrollTo > -1) {
            //dont scroll if were already at the top and scrolling up
            //or at the bottom and scrolling down
            $('html, body').animate({scrollTop: scrollTo + 'px'}, function(){
                //allow scrolling again
                scrolling=false;
            });
        } else {
            scrolling=false;
        }
    });

var page=$（“#page_容器”）；
var home=$（“#home”）；
var音乐家=$（“#音乐家”）；
var运动员=$（“#运动员”）；
var politics=$（“#politics”）；
var bio=$（“#bio”）；
var pages=[家庭、音乐家、运动员、政治、个人简历]；
var头寸=[]；
$。每个（页，函数（k，页）{
positions.push（parseInt（page.position（）.top））；
});
//确保我们在滚动时不会试图皱眉
var滚动=假；
$（第页）。在（“mousewheel-DOMMouseScroll”上，函数（事件）{
event.preventDefault（）；
如果（滚动===真）{
返回false；
}
滚动=真；
var scrollTop=$（窗口）.scrollTop（）；
var-scrollTo=-1；
if（event.originalEvent.wheelDelta>0 | | event.originalEvent.detail<0）{
//向上滚动，找到页面上低于滚动条的最高位置
$。每个（位置，功能（k，位置）{
如果（位置<滚动顶部）{
滚动到=位置；
}
});
}
否则{
//向下滚动，找到比滚动条高的最低位置
//由于列表已排序，请停止第一个列表
$。每个（位置，功能（k，位置）{
如果（位置>滚动顶部）{
滚动到=位置；
返回false；
}
});
}
如果（滚动至>-1）{
//如果已在顶部并向上滚动，则不要滚动
//或者在底部向下滚动
$（'html，body'）。动画（{scrollTop:scrollTo+'px'}，函数（）{
//允许再次滚动
滚动=假；
});
}否则{
滚动=假；
}
});