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

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

1 个答案: