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();


お役に立てれば
関連記事

javascript - push.applyを使用して、ノックアウトがJavaScriptオブジェクトとどのように相互作用するかを理解する

javascript - お問い合わせフォームの送信前にキャプチャを入力してくださいPHP&JavaScript

javascript - ドーナツグラフがグラフJsとバックボーンjsでデータを表示しない

javascript - デフォルトで情報ウィンドウを開く

javascript - ターボリンクでJavaScriptの依存関係を読み込む方法

javascript - 2画像を同時に表示

javascript - 配列から改行を削除する-JavaScript

javascript - JavaScript画像のsrc属性が誤った値を返す

javascript - Angularはファイル名でAPI応答のダウンロードをトリガーします

javascript - JavaScriptでHTMLチェックボックスをループ