使用jQuery滾動到niceScroll中的下一個元素

我正在使用nice-scroll。當我滾動一個div時，它應該滾動到多個元素的多個同一div的下一個元素使用jQuery滾動到niceScroll中的下一個元素

滾動應該是上下的;如果元素沒有下一個元素，則應停止滾動。此外，還有多個具有相同名稱的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>

來源

2017-09-17 jay khatri

嗯，我認爲你需要使用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}); 
});

來源

2017-09-17 21:30:54

thanx的答案，但我想，對於OnScroll使用niceScroll –

你去那裏！ :) – 2017-09-18 18:38:56

使用jQuery滾動到niceScroll中的下一個元素

回答

相關問題