0

我正在使用漂亮的滚动。当我滚动一个 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">
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
	<div class="mid-box">
		<h1>Jay Khatri</h1>
		<p>Web Designer</p>
	</div>
</div>

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

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

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

4

1 回答 1

0

那么我认为你需要使用 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-17T21:30:54.303 回答