滚动到下一个可见元素答案

【问题标题】：Scroll to next visible element滚动到下一个可见元素
【发布时间】：2012-08-05 11:41:41
【问题描述】：

我有一个主 div，其中包含滚动、外部潜水和内部潜水。我想当我单击一个按钮时，主 div 滚动到下一个内部 div 的开头，这个 jsfidlle 更好地解释了这种情况

第一次点击滚动到 div 11 然后 12 然后 13 然后到 21 这是在下一个子 div 等等

我试图利用这个问题的第二条评论

Get the first and last visible element in a scrollable div by Rob W 但是当 console.logged 时，应该保存对第一个可见元素的引用的变量 $first 给了我未定义的。问题是它做错了什么？如何做到这一点？

提前致谢

****编辑****

应用 devundef 的建议后，我仍然无法获得正确的滚动顺序

现在是 12 -22 -32

应该是 11 - 12 -13 -21-22…等

换句话说，如何获取第一个可见的内部 div (class=”sub2”)，然后我可以使用它来获取/滚动到下一个可见的内部 div

新的小提琴

http://jsfiddle.net/alamin84/63FY7/15/

【问题讨论】：

标签： jquery scroll

【解决方案1】：

此行永远不会计算为true：

if ($first && position.top >= positions.top) ...

因为此时 $first 为空。你要问!$first

if (!$first && position.top >= positions.top) ...

小提琴：http://jsfiddle.net/63FY7/3/

顺便说一句，我建议使用 jquery.scrollTo 插件，它工作得很好：

演示：http://demos.flesler.com/jquery/scrollTo/

sn-p：http://jsfiddle.net/wuN65/1/

【讨论】：

一个非常不错的 jQuery 插件处理滚动和更多：jQuery Waypoints
你在一个循环中，你想要第一个满足条件position.top >= positions.top的元素。 $first 从没有值开始，一旦你点击了第一个具有position.top >= positions.top 的元素，你就将它设置为$first。 First 现在包含第一个元素。测试!$first 的意思是：如果我还没有找到$first...

【解决方案2】：

如何获得第一个可见的内部 div (class=”sub2”)？
我不需要外部 div 的外部选择器和内部 div 的内部选择器只有一个内部 div 的选择器会做

代码：

                 $("#btnScroll").click(function (event) {

                     var $firstinner, $lastinner, $containerinner = $("#dvmn"),
                         positions = $containerinner.offset(),
                         positionsinner = $containerinner.offset();


                     $('.sub2').each(function (i, obj) {
                         var $thisinner = $(this),
                             positioninner = $thisinner.offset();


                         if (!$firstinner && positioninner.top >= positions.top) {

                             $firstinner = $thisinner.next();
                             if ($firstinner.length == 0) {
                //When last inner div get to next outer div
                                 $firstinner = $thisinner.parent().next();

                             }

                             console.log($firstinner);
                         }

                     });

                     $containerinner.scrollTo($($firstinner), {
                         duration: 500
                     });

                 });

小提琴： http://jsfiddle.net/alamin84/63FY7/24/

感谢 devundef，当然还有使用 jquery.scrollTo 插件

【讨论】：

【解决方案3】：

一个非常粗略和老派的方法是使用scrollIntoView() 方法。

所以如果你知道下一个element 是什么，你就可以这样做......

element.scrollIntoView()

阅读更多here。

【讨论】：

但问题在于找到下一个元素是什么。