使用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中的下一个元素

回答

相关问题