Question

同样的故事你已经听过一千次了：我有一个div，其中包含一系列事件，我希望它能滚动浏览这个列表。但是，在我看过的答案中，方法是始终将nth-child置于div的顶部，而不是底部。因为我希望我的用户专注于过去的元素，而不是未来，我更喜欢孩子处于底层。以下是我目前正在使用的代码：

<!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的顶部。我希望它在底部。谢谢！

Answer 1

我认为你只能通过JS自己进行计算。

e.g。

您的可见div的高度为：H
你的每个子元素的高度为l（如果它们的高度不均匀会更复杂，但概念仍然存在）
a * l = H

如果您希望n-th child位于底部，则需要设置为scroll T，以便：T = H - a * l，这意味着您应该将scrollTop设置为{ {1}}

使用js / jquery滚动到div的第n个子节点，所以nth child在底部，而不是top

1 个答案: