Question

我有一个类似以下的结构来创建单页Web应用程序，使用一些滚动功能：

<div class="home_section"></div> <!-- 1 -->
<div class="home_section"></div> <!-- 2 -->
<div class="home_section"></div> <!-- 3 -->
<div class="home_section"></div> <!-- 4 -->

当滚动事件开始时，我需要滚动到上面的每个DIV。因此，例如，当滚动开始时，如果从顶部可见的第一个DIV是，则主体必须自动滚动到DIV 。

这就是我在做的事情：

if ($(this).attr('id') == 'home') {
    $(document).on("scrollstart", function (e) {
        console.log('scrolling started on home');

         e.preventDefault();

         var next = $(this).find(".home_section"); //here I need to calculate which is the next DIV to scroll to
         $('html, body').animate({
               scrollTop: next.offset().top
          });

    });
}

问题是我不知道如何检查哪个是从顶部开始的第一个.home_section DIV visibile，所以我无法计算哪个是要滚动到的下一个目标DIV。

感谢您的帮助

Answer 1

我会遍历所有.home_sections div，然后像这样获得第一个:visible

var divs = $(".home_section");
for(var x = 0; x < divs.length; x++){
    if($(divs[x]).is(":visible")){
        //do what you need here 
        var me = divs[x];
        var next = x < divs.length - 1 ? divs[x] : undefined;
        if(next){
            //do the scroll
        }
        //then break the for loop
        break;
    }
}

这样你有一个div数组，你发现第一个可见，然后你有nth+1 div的引用。

应该有效的另一个解决方案：

var firstVisible = $(".home_section:visible:eq(0)");
var next = $(firstVisible).next();

希望这会有所帮助

Answer 2

下一个div将是$（this）.next（）;

var next = $(this).next();

但是您需要修改此行才能使其适用于所有div：

if ($(this).attr('id') == 'home')

Answer 3

修改行var next = $(this).find(".home_section");，如下所示，获得第一个div为class“home_section”。

var next = $（this）.getElementsByClassName（“home_section”）[0];

jQuery从顶部开始按类名选择DIV

3 个答案: