动画滚动到滚动上的特定页面位置

Posted 2023-03-10

【中文标题】动画滚动到滚动上的特定页面位置

【英文标题】：animate scroll to specific page position on scroll

【发布时间】：2015-10-11 12:10:30

【问题描述】：

我正在尝试复制 http://blkboxlabs.com/ 上的滚动事件，当用户滚动它时，它会将屏幕动画到下一个全高部分，具体取决于他们是向上还是向下滚动。

我也有类似的功能，但它不太流畅，如果用户滚动足够多，它将跳过 2 个部分，而不是在下一个部分停止。

var didScroll;
var lastScrollTop = 0;
var delta = 5;


$(window).scroll(function(event)
    didScroll = true;
);

setInterval(function() 
    if (didScroll) 
        hasScrolled();
        didScroll = false;
    
, 800);

function hasScrolled() 
    var st = $(document).scrollTop();
    var winTop = $(window).scrollTop();
    var winBottom = winTop + ($(window).height());

    // Make sure they scroll more than delta
    /*if(Math.abs(lastScrollTop - st) <= delta)
        return;*/

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop)
        // Scroll Down
        $('.fullHeightScrollAssist').each(function(index, element) 
            var elTop = $(this).offset().top;
            var elBottom = elTop + $(this).outerHeight();
            if(elTop > winTop && elTop < winBottom)
                $('.fullHeightScrollAssist').removeClass('activeFullScreen');
                $(this).addClass('activeFullScreen');
                $('html,body').animate(scrollTop: elTop, 700);    
            ;
        );
     else 
        // Scroll Up
            $('.fullHeightScrollAssist').each(function(index, element) 
                var elTop = $(this).offset().top;
                var elBottom = elTop + $(this).outerHeight();
                if(elBottom > winTop && elTop < winTop)
                    $('.fullHeightScrollAssist').removeClass('activeFullScreen');
                    $(this).addClass('activeFullScreen');
                    $('html,body').animate(scrollTop: elTop, 700);    
                ;
            );
    

    lastScrollTop = st;

你可以在https://jsfiddle.net/raner/vhn3oskt/2/看到我的例子

我想要完成的事情： 1. 在滚动时立即运行动画 scrollTop 函数，只运行一次。 2. 动画开始后终止任何进一步的滚动，以防止它跳过下一部分。

【问题讨论】：

虽然我非常推荐为此使用 jQuery，但您可以尝试在 this thread 的帮助下单独使用 javascript。

【参考方案1】：

对于其他可能想知道的人，这是我发现的一个插件，它的功能与我正在寻找的东西很接近，并且比我最初的尝试要顺畅得多。

http://www.jqueryscript.net/demo/jQuery-Plugin-For-Smooth-Scroll-Snapping-panelSnap/demos/