用JS/jQuery的滚动到div中第n个孩子的第n个孩子是在底部，不顶

同样的故事你听说过一千遍：我有一个div包含事件列表，我希望它滚动浏览这个列表。然而，在我看过的答案，采取的办法是随时获得nth-child到div的顶部，而不是底部。因为我希望我的用户专注于过去的元素而不是未来，所以我宁愿让孩子处于底层。这是我目前使用的代码：用JS/jQuery的滚动到div中第n个孩子的第n个孩子是在底部，不顶

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset = "utf-8"> 
    <title>Help Me, I'm New...</title> 
    <script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.min.js"></script> 
    </head> 

    <body> 
    <div style = "text-align: center;"><h1 id = "title">My First Web Application</h1></div> 
    <div> 
     <iframe src = "plot0.html" width = 80%% height = 1100px id = "sankey" style = "border: none; float: left;"></iframe> 
     <div style = "float: left; overflow: auto; height: 800px; width: 20%%; border: 1px;" id = "events"></div> 
     <script> 
     $(function() { 
      var selector = $("#sankey"); 
      var delay_sec = 1.5; 
      var num = 1, 
       len = 84; 
      var events = [array_of_events]; 
      for (i = 0; i < events.length; i++) { 
      $("#events").append(events[i]); 
      } 
      setInterval(function() { 
      num = (num === len) ? 0 : num; 
      selector.attr("src", "plot" + num + ".html"); 
      $("h3:lt(" + num + ")").css("color", "#000000"); 
      $("h3:nth-of-type(" + num + ")").css("color", "#FF6A6A"); 
      $("p:lt(" + num + ")").css("color", "#000000"); 
      $("p:nth-of-type(" + num + ")").css("color", "#FF6A6A"); 
      $("#events").scrollTop($("#events h3:nth-of-type(" + num + ")").position().top - $("#events h3:first").position().top); 
      num++; 
      }, delay_sec * 1000); 
     }); 
     </script> 
    </div> 
    </body> 
</html>

启动$("#events").scrollTop该生产线是我想解决什么。

编辑
我也许应该指出的是，在array_of_events每个元素看起来像这样：<h6>2015-11-05</h6><p>brittenb offers reputation to whomever answers this question</p>

我知道如何滚动到div的底部（但太远了），我知道如何将感兴趣的孩子置于顶端，但这不太理想。我如何简单地滚动以便nth-child是div中最后一个可见元素？

更新
这里是JSFiddle。 iframe没有填充，但这是无关紧要的。正如你所看到的，因为它滚动突出h3和p标签无法移动到div的顶部。我宁愿它在底部。谢谢！

来源

2015-11-05 brittenb

您能否提供一个工作示例，理想情况下是一个片段或jsfiddle，以便可以专注于问题而不是其余的问题中的无用代码？谢谢。 – JotaBe

@JotaBe是的，当然。给我一些虚拟一些数据并把它放在一起。完成后我会发布链接。 – brittenb

我认为这是比这更容易，创建最终的HTML，并解释你想要的滚动做什么。 – JotaBe

我想你只能通过JS做自己的计算。

例如

高度的可见DIV的是：H
每个子元素的具有高度l（将是，如果他们不即使在高度复杂，但概念仍然）
a * l = H

如果您希望n-th child位于底部，那么您希望设置为scrolltop T，例如：T = H - a * l，这意味着您应该将scrollTop设置为(n - a)th child

来源

2015-11-05 17:20:29

感谢您的支持！我现在试着将这种方法结合起来，看看我能想出什么。 – brittenb

用JS/jQuery的滚动到div中第n个孩子的第n个孩子是在底部，不顶

回答

相关问题