在身体点击时滚动到下一个 div

Question

我有许多 div 都带有类 '.slide' 和一个滚动功能，当单击 .slide div 时滚动它们。

请看这里： http://codepen.io/thomasjwpayne/pen/KFotg

但是，我试图在单击正文而不是幻灯片时使该功能起作用。另外，因为幻灯片显示为内联块，所以当下一张幻灯片已经完全在视口中时，我需要它滚动到幻灯片。

有人对此有任何指导吗？

Answer 1

在我的示例中，您必须在某处保留跟踪器 - 我使用 body 来保留 data-* 属性，该属性存储当前可见的当前 jQuery 对象。

var currentSlide = $('body').data( 'current-slide', $('div.slide').eq(1) );

然后将$.click() 处理程序从$('div.slide') 切换到$('body')：

$('body').click(function(e){
   e.preventDefault();
   //get the current slide index from the body tag.
   $this = currentSlide.data( 'current-slide' );
   $next = $this.next('div.slide');

   if($next.length) {
        $next.scrollTo($next.attr('id'));
        //Save the next slide as the current.
        $('body').data( 'current-slide', $next );
   } else {
        //Throw us back to the top.
        $('div.slide:first').scrollTo($('div.slide:first').attr('id'));
        //Save the first slide as the first slide, which 
        //Cycles us back to the top.
        $('body').data( 'current-slide', $('div.slide:first'));
   }

   $(".slide a").click(function(e) {
       e.stopPropagation();
   });
});

CodePen 演示： http://codepen.io/anon/pen/tBqhJ