Question

我有一系列100％高度的div，带有滚动功能，可以在背景点击时将你带到视口的下一个div。但是，如果下一个div已经在视口中略微显示，则整个事物都被视为可见，滚动可以绕过它。任何人都可以提供有关如何让脚本滚动到div的方向，即使它已经部分位于视口中了吗？

Codepen here.

如果你开始在codepen中稍微滚动，然后点击背景，你会发现它并没有滚动到视口中已经存在的div，而是之后的div。

$(document).ready(function() {


// get initial nav height
        var $window = $(window);
        var wst = $window.scrollTop();
        var th = $('div.top').height();
        var currentSlide = $('#wrapper').data( 'current-slide', $('div.slide').eq(0) );

        $('div.scroll_images').css({ height: 'auto', overflow: 'visible', top: 0 });
        $('div.scroll_images div.inner').css({ position: 'absolute', top: 0 });
        $('div.slide').each(function() {
                $(this).css('padding',function() {
                return (($(window).height()-$(this).height())/2)+'px 0'
            });
        });



            // scrollto for click on slide
            jQuery.fn.scrollTo = function(hash) {
                $this = $(this);
                st = $this.offset().top - th; // subtract nav height
                $('html, body').animate({ scrollTop: st }, 550
                );
            }

                $('#wrapper').click(function(e){
                //get the current slide index from the body tag.
                $this = currentSlide.data( 'current-slide' );
                $next = $(".slide:below-the-fold");

                if($next.length) {
                $next.scrollTo($next.attr('id'));
                //Save the next slide as the current.
                $('#wrapper').data( 'current-slide', $next );
                } else {
                //Throw us back to the top.
                $('div.slide:first').scrollTo($('div.slide:first').attr('id'));
                //Save the first slide as the first slide, which 
                //Cycles us back to the top.
                $('#wrapper').data( 'current-slide', $('div.slide:first'));
                }
            })
                //Images fade in
                $('img').hide();
                $('img').each(function(i) {
                if (this.complete) {
                $(this).fadeIn();
                } else {
                $(this).load(function() {
                $(this).fadeIn();
                });
                }
            });

                //Stop links affecting scroll function
                $("a").click(function(e) {
                e.stopPropagation(); 
                });

});




(function($) {

    $.belowthefold = function(element, settings) {
        var fold = $(window).height() + $(window).scrollTop();
        return fold <= $(element).offset().top - settings.threshold;
    };


    $.extend($.expr[':'], {
        "below-the-fold": function(a, i, m) {
            return $.belowthefold(a, {threshold : 0});
        }
    });

})(jQuery);

Answer 1

这是我可能尝试做的事情：浏览系列中的每个div。找到offset()最接近$(window).scrollTop()的div。现在，在“当前”之后找到next() div并滚动到它。

为了比较每个div的offset()，请尝试以下方法：

var closest = $('[selector]:first');
$('[selector]').each(function() {
    var oldDistance = Math.abs(closest.offset() - $(window).scrollTop());
    var newDistance = Math.abs($(this).offset() - $(window).scrollTop());

    if(newDistance < oldDistance) {
        closest = $(this);
    }
}

在浏览器中滚动到下一个div

1 个答案: