javascript - jQueryは、上からクラス名でDIVを選択します

原文 javascript jquery scroll

スクロール機能を使用して、1ページの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が<!-- 2 -->の場合、本体はDIV <!-- 3 -->まで自動的にスクロールする必要があります。

これは私がやっていることです:

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可視性を確認する方法がわからないため、スクロール先の次のターゲットDIVを計算できないことです。

助けてくれてありがとう

答え

すべての.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();

お役に立てれば

関連記事