Question

我有这样的结构：

   <div id="cont">
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     <div class="entry">
       <div class="t_time">16:40</div>
       <div class="t_label">Some text</div>
     </div>
     ... may be more "entry" divs
   </div>

我想像一个选框一样向上/向下滚动所有entry类。问题是，我发现的所有jQuery插件都无法正常工作，它们会滑动整个cont div，或者滑动entry类，但是很奇怪且不可取。

你们有什么好的插件吗？或者你已经为此创建了一些代码？

提前致谢！

修改

容器#cont应该保留在它开始的位置，而不是移动，只包含其中的entry div。 Rob建议使用另一个div来包装它们，然后相应地移动它。问题是，我只想在输入div超出父级的高度时（这不是问题）触发一个类似于选框的东西，我希望它从div的开头开始（这意味着，不会再次显示WHOLE div，只有溢出的entry divs），然后只显示隐藏的最后一个条目div，因为它们溢出。然后所有的动画都会重演（从这一点来说，我想无休止地滑动整个div的内容）。知道任何插件吗？

Answer 1

好的，你无法描述它，但无论如何我都要打一个平底船！

可能是因为你错过了一个关于cont div的视口。也就是说，定义你想要看到的窗口大小的东西。

我考虑添加另一个div。 E.g。

<div id="contViewport">
  <div id="cont">
     <div class="entry">
...

然后，您可以设置contViewport的属性，以便只看到一点。 E.g。

#contViewport {
    height:100px;
    overflow:hidden;
    border: 1px solid black;
}

然后你可以添加JQuery来沿着这个答案的行滚动该视口：

Scroll to bottom of Div on page load (jQuery)

我在这里汇总了一个简单的例子：

http://jsfiddle.net/KeayW/

Answer 2

我不知道你想要什么，但是你激励我做一个小提琴。这是一个将连续从页面底部滚动到顶部的函数：

function scrollUp(){
    // Get the window's height
    var windowHeight = $(window).height();
    // Get a handle on the container
    var cont = $('#cont');
    // Get the container's height
    var contHeight = cont.height();
    // Set the container to be below the viewport
    cont.css({top:windowHeight});
    // Animate the container to move up over 15 seconds, then restart the animation
    cont.animate({top:'-=' + (windowHeight + contHeight)}, 15000, scrollUp);
}

See this working jsFiddle了解它的工作原理和CSS。

编辑：有关更新的jsFiddle，请参阅此答案中的评论。这个解决方案不是我想要的所有目的，并且有很多循环，但它应该可以做到！

function scrollUp(){
    // Get a handle on the container
    var cont = $('#cont');

    // Get the container's height
    var contHeight = cont.height();

    // Get a handle on the child elements
    var entries = cont.find('.entry');

    // Records the heights of each entry div
    var heights = [];
    var i = 0;
    for(; i < entries.length; i++){
        heights.push($(entries[i]).outerHeight());    
    }

    // Calculate the total height of all the entries
    var totalHeight = 0;
    for(i = 0; i < heights.length; i++){
        totalHeight += heights[i];   
    }

    // If it doesnt fit, scroll!
    if(totalHeight > contHeight){
        // Change css so that entries will scroll
        entries.css('position','absolute');

        // Set the entries to be below the viewport based on height of elements above
        for(i = 0; i < entries.length; i++){
            var previousEntryHeights = 0;
            for(var j = 0; j < i; j++){
                previousEntryHeights += heights[j];
            }

            $(entries[i]).css({top:(contHeight + previousEntryHeights)});        
        }

        // Set the entries to scroll up based on height of elements below
        for(i = 0; i < entries.length; i++){
            var nextEntryHeights = 0;
            for(var j = i; j < entries.length; j++){
                nextEntryHeights += heights[j];
            }
            $(entries[i]).animate({top:-nextEntryHeights}, 15000, scrollUp);   
        }
    }
}

// Set the marquee in motion
scrollUp();

真实地滑动div的内容

修改

2 个答案: