9

我正在尝试创建一个网页，其中包含用户可以从中选择的元素表。元素的数量可以小到单个元素，但也可以增长到大约 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>

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

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

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

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

4

4 回答 4

7

尝试这样的事情：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. 我添加了一些 CSS 使行的高度不一致，只是为了检查该技术的稳健性。

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

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);
}());

的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>

一些 CSS

.selected {
    color:#00aa00
}
table tr:nth-child(2n) {
    font-size:200%;
}
于 2013-03-28T23:23:38.923 回答
1

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

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

于 2013-03-28T23:03:54.237 回答
0

您可以使用原版 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 tohttp://yourwebsite.com/some-page#new将跳转到第 9 项。

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

于 2013-03-28T23:14:56.113 回答
0

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

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

于 2020-05-25T14:28:40.613 回答