How to programmatically scroll an HTML element?
Try something like this: http://jsfiddle.net/2yMWC/1/ (no jQuery)
The idea is that when an element is selected, you take note of that element's offsetTop
property in JavaScript, and then update the <div>
element's scrollTop
to match. I added some CSS making the heights of the rows inconsistent just to check how robust the technique is.
Here's a more generic example where the user can select any row and jump/scroll there: http://jsfiddle.net/2yMWC/
The 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
<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
.selected {
color:#00aa00
}
table tr:nth-child(2n) {
font-size:200%;
}