垂直滑动 div 的内容

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 的开头开始（这意味着，不会再次显示整个 div，只显示溢出的entry div），然后只显示隐藏的最后一个条目 div，因为它们溢出了。然后所有的动画都会重复自己（从这一点开始，我想无休止地滑动整个 div 的内容）。知道有什么插件可以做到这一点吗？

Answer 1

好吧，你无法形容它，但我还是要赌一把！

可能是您缺少 cont div 周围的视口。也就是说，它定义了你想看到的 cont 窗口的大小。

我会考虑添加另一个 div。例如

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

然后您可以设置 contViewport 的属性，以便您只看到它的一部分。例如

#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

我不知道你想要什么，但你启发了我制作小提琴。这是一个将 cont div 从页面底部滚动到顶部的函数：

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。

编辑：请参阅此答案中的 cmets 以获取更新的 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();