jQueryを使用してniceScrollの次の要素にスクロールします。

Question

nice-scrollを使用しています。 divをスクロールすると、複数の要素を持つ複数の同じdivの次の要素にスクロールする必要があります

スクロールを上下にする必要があります。要素に次の要素がない場合、スクロールを停止する必要があります。また、同じ名前の複数のdivがあるため、それを管理するには複雑すぎる可能性があります。

$(document).ready(function() { 
 
    $(".detail-box").niceScroll({cursorborder:"",cursorcolor:"#00F",boxzoom:true}); 
 
    });

.detail-box{float:left; width: calc(25% - 20px); padding:10px; height:550px; overflow:hidden;} 
 
.detail-box .mid-box{margin:8px 0px; background:#c7c7c7;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://nicescroll.areaaperta.com/wp-content/plugins/jnicescroll/js/jquery.nicescroll.min.js"></script> 
 

 
<div class="detail-box"> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
</div> 
 

 
<div class="detail-box"> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
</div> 
 

 
<div class="detail-box"> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
</div> 
 

 
<div class="detail-box"> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
\t <div class="mid-box"> 
 
\t \t <h1>Jay Khatri</h1> 
 
\t \t <p>Web Designer</p> 
 
\t </div> 
 
</div>

Answer 1

さて、私はあなたがjQueryの機能.next()を使用する必要があると思います。ここでは、特定のCSSクラスを持つ次の要素に自動的にスクロールする例を示します。 これはまさに私が信じることを達成しようとしていることです。

http://jsfiddle.net/UaGjs/9/

var next; 
$('.next').click(function() { 
    if (next === undefined) { 
    next = $('.mid-box').next(); 
    } else { 
     next = next.next(); 
    } 
    $(".mid-box").niceScroll({cursorborder:"",cursorcolor:"#00F",boxzoom:true}); 
});