Jak programowo przewinąć element HTML?

Question

Próbuję utworzyć stronę internetową z tabelą elementów, które użytkownik może wybrać. Liczba elementów może być tak mała, jak pojedynczy element, ale także może wzrosnąć nawet do około 120. Nie chcę, aby tabela rozciągała stronę, więc wkładam ją do własnego znacznika <div> o określonej wysokości i pionowy pasek przewijania. A Przykład goły:

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

W tym przykładzie tabela jest w strefie pionie przewijanie i aktywny element jest ostatni w tabeli. Jak na razie dobrze.

Moje pytanie brzmi: Podczas aktualizacji tej tabeli, w jaki sposób ustawić ją tak, aby automatycznie przewijała do końca? Np. Kiedy strona jest tworzona, powinna automatycznie wybrać element # 9; UI powinien już podświetlić tę pozycję na liście, a to oznacza automatyczne ustawienie paska przewijania do końca.

Nie widzę sposobu, aby to zrobić ze znacznikiem <div> (choć być może czegoś mi brakuje). Czy muszę używać znacznika w jaki sposób? Sądzę, że jeśli każda linia tabeli ma znacznik zakotwiczenia, wówczas pozycja przewijania może być ustawiona w ten sposób. Nie jestem do końca pewien, jak to zrobić, więc pomyślałem, że zapytam.

Wiem, że są prawdopodobnie wtyczki tabeli danych mogę to zrobić (wcześniej korzystałem z YUI i nigdy nie odkryłem, czy to rozwiąże ten konkretny problem). Wydaje się to jednak na tyle proste, że nie uważam, że powinienem zaimportować dowolną wtyczkę, która mogłaby być z łatwością wykorzystana jako cały arkusz kalkulacyjny w przeglądarce.

Answer 1

Try coś takiego: http://jsfiddle.net/2yMWC/1/ (bez jQuery)

Chodzi o to, że po wybraniu elementu należy wziąć pod uwagę właściwość tego elementu o wartości offsetTop w języku JavaScript, a następnie zaktualizować <div> element's scrollTop do dopasowania. Dodałem trochę CSS, co sprawia, że ​​wysokość rzędów jest niespójna, aby sprawdzić, jak solidna jest ta technika.

Oto bardziej ogólny przykład, w którym użytkownik może wybrać dowolny wiersz i skok/Scroll tam: 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> 

Niektóre CSS

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

Answer 2

Możesz po prostu ustawić właściwość scrollTop elementu kontenera na jego właściwość scrollHeight, aby przewinąć ją do dołu.

Można również ustawić go na element docelowy obiektu offsetTop (a nawet odjąć niektóre z nich, aby uzyskać go bliżej środka widoku).

Answer 3

Możesz to zrobić za pomocą wanilii HTML. Nadaj elementowi atrybut ID i dołącz identyfikator do adresu URL. Będzie ona funkcjonować jako kotwicy docelowy:

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

Idąc do http://yourwebsite.com/some-page#new przeskoczy do pozycji 9.

Więcej informacji na w3.org (zawiadomienie kotwicy w adresie URL): http://www.w3.org/TR/html4/struct/links.html#h-12.1.3