Question

我有一个主要的div与滚动和外潜和内潜。我希望当我单击一个按钮时，主div会滚动到下一个内部div的开头，这种情况在这个jsfidlle中有更好的解释

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

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

Rob W的

Get the first and last visible element in a scrollable div 但是应该保存对第一个可见元素的引用的变量$ first在console.logged中给出了我的未定义。问题是它做错了什么？怎么做对了？

提前致谢

**** ****编辑

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

现在是12 -22 -32

应该是11 - 12 - 13 - 21-22 ......等等。

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

新小提琴

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

Answer 1

此行永远不会评估为true：

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

因为此时$ first为null。你必须要求!$first

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

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

顺便说一下，我建议使用jquery.scrollTo插件，它运行得很好：

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

摘录：http://jsfiddle.net/wuN65/1/

Answer 2

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

因此，如果你知道下一个element是什么，你就可以做..

element.scrollIntoView()

了解更多here。

Answer 3

如何获得第一个可见的内部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 个答案: