How to Scroll Programmatically a Div with Its Own Scrollbars

How can I scroll programmatically a div with its own scrollbars?

The div has a scrollTop property that you can set (and its pal, scrollLeft).

• jsFiddle Demo

• scrollTop on MDN

• scrollLeft on MDN

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%;
}

How to scroll programmatically scroll? (javascript)

You can use the element's scrollIntoView function.

In vanilla JS it would look like this for example:

document.querySelector('#sport').scrollIntoView();

With react instead of querying a selector with the document, you should create a ref to the element instead. Read through this if you're unsure how that works.

Edit: If you want it to be in the middle of your view, you can pass an options object to scrollIntoView like this:

...scrollIntoView({ inline: "center" });

How to programmatically scroll to bottom of a div while using Simplebar js

Use this

$('body').scrollTop($('body').height());

You can replace body according to your dom element

Programmatic scroll on a div with parent with overflow-x hidden

It works if you move

overflow-x: hidden

onto the row-class instead.

And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.

programatically scroll *within* a child div in angular

You could use element.scrollTop = x. You can see a basic demo here - it will automatically scroll the child div's content after 2 seconds.

The demo uses $timeout, obviously you'll need to put that logic in your $http calls success part.

Assuming you have everything else done, the relevant part is the following:

var target =  angular.element(document.querySelector('#result'));
// #result is your directive's child div
target[0].scrollTop = 200;
// You'll have to calculate the exact number if it's not a fix one.

Scroll to an element in a different, scrollable div in React using refs

You are trying to scroll the window, but you need to scroll the parent block. Inspect the elements through the developer tools and see.

const scrollToRef = ref => {
  ref.current.parentElement.scrollTo(0, ref.current.offsetTop);
};

programmatically scrolling a set of divs inside a parent div

You can set the scrollTop of any dom element like this. I hope this might help you to apply logic in your code.

var valueToScroll = 100;
$("selector").scrollTop(valueToScroll);

//With animation

$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 } );

How do I scroll a scrollable div to the exact center?

outerDiv[0].scrollTop = img.height() / 2;
outerDiv[0].scrollLeft = img.width() / 2;

This is not correct. Scroll top and left should also depend on outerDiv's height and width.

This works:

outerDiv[0].scrollTop = img.height() / 2 - outerDiv.height()/2;
outerDiv[0].scrollLeft = img.width() / 2 - outerDiv.width()/2;

Please see http://jsfiddle.net/zBv3v/3/

---

Related Topics