Question

我正在尝试复制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.在滚动时立即运行animate scrollTop函数，只运行一次。 2.一旦动画开始，就杀死任何进一步的滚动，以防止它跳过下一部分。

Answer 1

对于其他可能想知道的人来说，这是一个插件我发现它做了一些接近我想要的东西，并且比我最初的尝试更顺畅。

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

滚动

1 个答案: