javascript 如何以编程方式滚动 HTML 元素？

Question

提问by Multimedia Mike

I am trying to create a web page that has a table of elements that the user can select from. The number of elements could be as small as a single element but also grow as large as about 120. I don't want the table to stretch down the page, so I'm stuffing it into its own <div>tag with a defined height and a vertical scroll bar. A bare-bones example:

我正在尝试创建一个网页，其中包含一个可供用户选择的元素表。元素的数量可以像单个元素一样小，但也可以增加到大约 120 个。我不希望表格向下延伸到页面，所以我将它填充到自己的<div>标签中，并具有定义的高度和垂直滚动条。一个简单的例子：

<div style="width:100px; height:100px; overflow-y:scroll; overflow-x:hidden;">
  <table>
    <tr><td>item 1</td></tr>
    <tr><td>item 2</td></tr>
    <tr><td>item 3</td></tr>
    <tr><td>item 4</td></tr>
    <tr><td>item 5</td></tr>
    <tr><td>item 6</td></tr>
    <tr><td>item 7</td></tr>
    <tr><td>item 8</td></tr>
    <tr style="color:#00aa00"><td>item 9</td></tr>
  </table>
</div>

In this example, the table is in a vertically-scrolling area and the active item is the last one in the table. So far so good.

在此示例中，表格位于垂直滚动区域中，活动项目是表格中的最后一项。到现在为止还挺好。

My question is:When updating this table, how can I set it so that it automatically scrolls to the end? E.g., when the page is created, it's supposed to select element #9 automatically; the UI should already highlight that item in the list and that means automatically setting the scrollbar to the end.

我的问题是：更新此表时，如何设置它使其自动滚动到最后？例如，当页面被创建时，它应该自动选择元素#9；UI 应该已经在列表中突出显示该项目，这意味着自动将滚动条设置到末尾。

I don't see a way to do it with the <div>tag (though I may be missing something). Do I need to use an <iframe>tag some how? I figure that if each line of the table has an anchor tag, then the scroll position could be set that way. I'm not completely sure how to do that, though, so I thought I would ask.

我看不到使用<div>标签的方法（尽管我可能遗漏了一些东西）。我需要如何使用<iframe>标签吗？我认为如果表格的每一行都有一个锚标记，那么滚动位置可以这样设置。不过，我不完全确定如何做到这一点，所以我想我会问。

I know there are probably data table plugins I can use to do this (I was using YUIpreviously, and I never figured out if it could solve this particular problem). But this seems simple enough that I don't feel I should need to import any plugin that could easily be used as an entire in-browser spreadsheet.

我知道可能有数据表插件可以用来执行此操作（我之前使用的是YUI，但我从未想过它是否可以解决这个特定问题）。但这似乎很简单，我觉得我不需要导入任何可以轻松用作整个浏览器内电子表格的插件。

Answer 1

采纳答案by Richard JP Le Guen

Try something like this: http://jsfiddle.net/2yMWC/1/(no jQuery)

尝试这样的事情：http: //jsfiddle.net/2yMWC/1/（没有 jQuery）

The idea is that when an element is selected, you take note of that element's offsetTopproperty in JavaScript, and then update the <div>element's scrollTopto match. I added some CSS making the heights of the rows inconsistent just to check how robust the technique is.

这个想法是当一个元素被选中时，你offsetTop在 JavaScript 中记下该元素的属性，然后更新该<div>元素的属性scrollTop以匹配。我添加了一些 CSS 使行的高度不一致，只是为了检查该技术的稳健性。

Here's a more generic example where the user can select any row and jump/scroll there: http://jsfiddle.net/2yMWC/

这是一个更通用的示例，用户可以选择任何行并在那里跳转/滚动：http: //jsfiddle.net/2yMWC/

The JavaScript

JavaScript

var divEl = document.getElementById("scroll-pane");
var selectedTrEl = undefined;

function select(index) {
    var trEl = divEl.getElementsByTagName("tr")[index];
    if(selectedTrEl) {
        selectedTrEl.className = "";
    }
    selectedTrEl = trEl;
    selectedTrEl.className = "selected";
    var scrollTo = selectedTrEl.offsetTop;
    divEl.scrollTop = scrollTo;
}

select(76);

(function forever() {
    var trEls = divEl.getElementsByTagName("tr");
    var itemNumber = trEls.length;
    var tdEl = document.createElement("td");
    tdEl.appendChild(document.createTextNode("item "+itemNumber));
    var trEl = document.createElement("tr");
    trEl.appendChild(tdEl);
    trEls[0].parentNode.appendChild(trEl);
    select(itemNumber);
    setTimeout(forever, 1000);
}());

The HTML

HTML

<div id="scroll-pane" style="width:250px; height:100px; overflow-y:scroll; overflow-x:hidden;">
  <table>
    <tr><td>item 0</td></tr>
    <tr><td>item 1</td></tr>
    <tr><td>item 2</td></tr>
    <tr><td>item 3</td></tr>
    <tr><td>item 4</td></tr>
    <tr><td>item 5</td></tr>
    <tr><td>item 6</td></tr>
    <tr><td>item 7</td></tr>
    <tr><td>item 8</td></tr>
    <tr><td>item 9</td></tr>
    <tr><td>item 10</td></tr>
    <tr><td>item 11</td></tr>
    <tr><td>item 12</td></tr>
    <tr><td>item 13</td></tr>
    <tr><td>item 14</td></tr>
    <tr><td>item 15</td></tr>
    <tr><td>item 16</td></tr>
    <tr><td>item 17</td></tr>
    <tr><td>item 18</td></tr>
    <tr><td>item 19</td></tr>
    <tr><td>item 20</td></tr>
    <tr><td>item 21</td></tr>
    <tr><td>item 22</td></tr>
    <tr><td>item 23</td></tr>
    <tr><td>item 24</td></tr>
    <tr><td>item 25</td></tr>
    <tr><td>item 26</td></tr>
    <tr><td>item 27</td></tr>
    <tr><td>item 28</td></tr>
    <tr><td>item 29</td></tr>
    <tr><td>item 30</td></tr>
    <tr><td>item 31</td></tr>
    <tr><td>item 32</td></tr>
    <tr><td>item 33</td></tr>
    <tr><td>item 34</td></tr>
    <tr><td>item 35</td></tr>
    <tr><td>item 36</td></tr>
    <tr><td>item 37</td></tr>
    <tr><td>item 38</td></tr>
    <tr><td>item 39</td></tr>
    <tr><td>item 40</td></tr>
    <tr><td>item 41</td></tr>
    <tr><td>item 42</td></tr>
    <tr><td>item 43</td></tr>
    <tr><td>item 44</td></tr>
    <tr><td>item 45</td></tr>
    <tr><td>item 46</td></tr>
    <tr><td>item 47</td></tr>
    <tr><td>item 48</td></tr>
    <tr><td>item 49</td></tr>
    <tr><td>item 50</td></tr>
    <tr><td>item 51</td></tr>
    <tr><td>item 52</td></tr>
    <tr><td>item 53</td></tr>
    <tr><td>item 54</td></tr>
    <tr><td>item 55</td></tr>
    <tr><td>item 56</td></tr>
    <tr><td>item 57</td></tr>
    <tr><td>item 58</td></tr>
    <tr><td>item 59</td></tr>
    <tr><td>item 60</td></tr>
    <tr><td>item 61</td></tr>
    <tr><td>item 62</td></tr>
    <tr><td>item 63</td></tr>
    <tr><td>item 64</td></tr>
    <tr><td>item 65</td></tr>
    <tr><td>item 66</td></tr>
    <tr><td>item 67</td></tr>
    <tr><td>item 68</td></tr>
    <tr><td>item 69</td></tr>
    <tr><td>item 70</td></tr>
    <tr><td>item 71</td></tr>
    <tr><td>item 72</td></tr>
    <tr><td>item 73</td></tr>
    <tr><td>item 74</td></tr>
    <tr><td>item 75</td></tr>
    <tr><td>item 76</td></tr>
    <tr><td>item 77</td></tr>
    <tr><td>item 78</td></tr>
    <tr><td>item 79</td></tr>
    <tr><td>item 80</td></tr>
    <tr><td>item 81</td></tr>
    <tr><td>item 82</td></tr>
    <tr><td>item 83</td></tr>
    <tr><td>item 84</td></tr>
    <tr><td>item 85</td></tr>
    <tr><td>item 86</td></tr>
    <tr><td>item 87</td></tr>
    <tr><td>item 88</td></tr>
    <tr><td>item 89</td></tr>
    <tr><td>item 90</td></tr>
    <tr><td>item 91</td></tr>
    <tr><td>item 92</td></tr>
    <tr><td>item 93</td></tr>
    <tr><td>item 94</td></tr>
    <tr><td>item 95</td></tr>
    <tr><td>item 96</td></tr>
    <tr><td>item 97</td></tr>
    <tr><td>item 98</td></tr>
    <tr><td>item 99</td></tr>
  </table>
</div>

Some CSS

一些 CSS

.selected {
    color:#00aa00
}
table tr:nth-child(2n) {
    font-size:200%;
}

Answer 2

回答by Niet the Dark Absol

You can just set the container element's scrollTopproperty to its scrollHeightproperty to get it to scroll to the bottom.

您只需将容器元素的scrollTop属性设置为其scrollHeight属性即可使其滚动到底部。

Alternatively, you can set it to the target element's offsetTop(and even subtract some from that to get it closer to the middle of the view).

或者，您可以将其设置为目标元素的offsetTop（甚至从中减去一些以使其更接近视图的中间）。

Answer 3

回答by chrx

You can do this with vanilla HTML. Give the element an ID attribute and append the ID to the url. It will function as a destination anchor:

你可以用普通的 HTML 来做到这一点。给元素一个 ID 属性并将 ID 附加到 url。它将用作目的地锚点：

<div style="width:100px; height:100px; overflow-y:scroll; overflow-x:hidden;">
  <table>
    <tr><td>item 1</td></tr>
    <tr><td>item 2</td></tr>
    <tr><td>item 3</td></tr>
    <tr><td>item 4</td></tr>
    <tr><td>item 5</td></tr>
    <tr><td>item 6</td></tr>
    <tr><td>item 7</td></tr>
    <tr><td>item 8</td></tr>
    <tr style="color:#00aa00" id="new"><td>item 9</td></tr>
  </table>
</div>

Going to http://yourwebsite.com/some-page#newwill jump you to item 9.

前往http://yourwebsite.com/some-page#new将跳转到第 9 项。

More info at w3.org (notice the anchor in the URL): http://www.w3.org/TR/html4/struct/links.html#h-12.1.3

w3.org 上的更多信息（注意 URL 中的锚点）：http: //www.w3.org/TR/html4/struct/links.html#h-12.1.3

Answer 4

回答by Juan Lanus

There is this element.scrollIntoView()function that does it very well.
Check https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

有这个element.scrollIntoView()功能做得很好。
检查https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

In your case, the elementwould be the LI that you want to make visible.
The function has options to set it at the top or the bottom of the container, or in other positions using newer parameters.

在您的情况下，这element将是您希望使其可见的 LI。
该函数可以选择将其设置在容器的顶部或底部，或者使用较新的参数将其设置在其他位置。

javascript 如何以编程方式滚动 HTML 元素？

提问by Multimedia Mike

采纳答案by Richard JP Le Guen

The JavaScript

JavaScript

The HTML

HTML

Some CSS

一些 CSS

回答by Niet the Dark Absol

回答by chrx

回答by Juan Lanus

相关推荐

最近更新

标签

javascript 如何以编程方式滚动 HTML 元素？

提问by Multimedia Mike

采纳答案by Richard JP Le Guen

The JavaScript

JavaScript

The HTML

HTML

Some CSS

一些 CSS

回答by Niet the Dark Absol

回答by chrx

回答by Juan Lanus

相关推荐

javascript 未捕获的类型错误：无法调用未定义的方法“推送”

PHP 中的命令相当于 javascript 中的警报

javascript 如何从dataurl在服务器上创建图像文件

javascript 代码在 HEAD 标签中不起作用

相关推荐

最近更新

标签