Page Up/Down 事件上的动画滚动

Posted 2023-05-09

【中文标题】Page Up/Down 事件上的动画滚动

【英文标题】：Animated Scroll on Page Up/Down Event

【发布时间】：2016-05-16 18:12:49

【问题描述】：

我正在尝试构建一个网站，当用户向上或向下滚动页面时，该网站会自动滚动到每个部分。几周以来，我一直在尝试解决这个问题，希望能在这件事上提供任何帮助。我认为问题在于事件处理程序是一个滚动事件，它触发一个滚动函数，这会导致发生多个滚动。我已经阅读了很多讨论这个主题的文章，解决方案似乎是添加一个 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);

    

【参考方案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();

查看This fiddle 获取工作示例！

希望它有所帮助:)

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

【参考方案2】：

我注意到您正在使用速度，但我不熟悉该插件。这是一个不使用setInterval/setTimeout的纯jquery实现：

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