Я пытаюсь создать веб-страницу с таблицей элементов, которую пользователь может выбрать. Количество элементов может быть таким же маленьким, как и один элемент, но также увеличиваться до 120. Я не хочу, чтобы таблица растягивала страницу, поэтому я набиваю ее в свой собственный тег с определенной высотой и вертикальная полоса прокрутки. Голой кости Пример:Как программно прокручивать элемент HTML?

<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; пользовательский интерфейс должен уже выделить этот элемент в списке, а это означает, что автоматически устанавливается полоса прокрутки до конца.

Я не вижу способа сделать это с помощью тега <div> (хотя, возможно, мне что-то не хватает). Нужно ли использовать тег ? Я полагаю, что если каждая строка таблицы имеет якорный тег, тогда положение прокрутки может быть установлено таким образом. Я не совсем уверен, как это сделать, поэтому я решил спросить.

Я знаю, что есть, вероятно, плагины таблиц данных, которые я могу использовать для этого (раньше я использовал YUI, и я никогда не выяснял, сможет ли он решить эту конкретную проблему). Но это кажется достаточно простым, что я не чувствую, что мне нужно будет импортировать любой плагин, который можно было бы легко использовать в виде всей электронной таблицы в браузере.

источник

2013-03-28 Multimedia Mike

Try что-то вроде этого: http://jsfiddle.net/2yMWC/1/ (не JQuery)

идея заключается в том, что при выборе элемента, вы принять к сведению offsetTop собственности этого элемента в JavaScript, а затем обновить <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-28 23:23:38

Спасибо за все это. Ваш пример работает красиво. Это также дает мне хорошую стратегию для обновления выделенной ячейки. К сожалению, я не могу заставить scrollTop «взять» в моем коде. I console.log() divEl.scrollTop как до установки после него, так и значения остается 0. Есть ли что-то, что мне нужно сделать, чтобы сделать свойство доступным для записи? –

Здесь должно быть что-то еще, потому что, когда я вручную настраиваю вертикальную полосу прокрутки, scrollTop все равно остается 0. –

Я обнаружил немного другое решение, которое делает то, что мне нужно: «selectedTrEl.scrollIntoView (false);» , Спасибо, что указал мне в правильном направлении. –

Свойство scrollTop можно установить в свой scrollHeight, чтобы прокрутить его до конца.

В качестве альтернативы вы можете установить его на целевой элемент offsetTop (и даже вычесть некоторые из них, чтобы приблизить его к середине).

источник

2013-03-28 23:03:54

Спасибо. Я немного искал - это scrollTop jQuery-ism? Я еще не занимался этим (но не прочь учиться). –

Нет, это обычный JavaScript. –

Вы можете сделать это с помощью ванильного HTML. Дайте элементу атрибут идентификатора и добавьте идентификатор в 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-28 23:14:56 chrx

Но будет ли это работать для программной итерации следующего элемента (или предыдущего) в списке без перезагрузки страницы? –

Как программно прокручивать элемент HTML?

ответ

В JavaScript

HTML-

Некоторые CSS

Смежные вопросы