Question

我正在使用精美滚动。当我滚动一个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>

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

使用jQuery滚动到niceScroll中的下一个元素

1 个答案: