9

ユーザーが選択できる要素のテーブルを持つ Web ページを作成しようとしています。要素の数は、1 つの要素と同じくらい小さい場合もありますが、約 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 なし)

要素が選択されたときに、offsetTopJavaScript でその要素のプロパティを確認し、一致するように<div>要素を更新するという考え方です。scrollTop手法の堅牢性を確認するためだけに、行の高さを一定にしない 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>

に行くとhttp://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 に答える