页面向上/向下事件的动画滚动

Question

我正在尝试构建一个网站,当用户向上或向下滚动页面时,该网站会自动滚动到每个部分.我已经试图解决这个问题好几个星期,并希望对此事有任何帮助.我相信问题是因为事件处理程序是一个滚动事件,它触发一个滚动函数,这会导致多个滚动发生.我已经阅读了很多讨论这个主题的文章,解决方案似乎是添加了一个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);

    }
}

Answer 1

确实设置了超时:)我认为你已经接近解决方案了。试试这个小代码：

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();
}

检查这个小提琴的工作示例！

希望它有帮助:)

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