Skip to content

Instantly share code, notes, and snippets.

@jocki84

jocki84/README.md

Forked from hsablonniere/README.md
Last active June 23, 2022 06:13
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save jocki84/6ffafd003387179a988e to your computer and use it in GitHub Desktop.
Save jocki84/6ffafd003387179a988e to your computer and use it in GitHub Desktop.
Download ZIP
scrollIntoViewIfNeeded 4 everyone!!!
Raw
README.md

Polyfill for scrollIntoViewIfNeeded()

This gist provides polyfill code for the scrollIntoViewIfNeeded() Element method found on WebKit browsers.

Features

There is no particular requirement on the position in the hierarchy of the element being made visible with respect to any scrollable areas. Elements that are relatively positioned as well as nested scrollable areas are both supported.

Licence

The files test-horizontal.html and test-vertical.html are under an unknown licence by github user hsablonniere. The remaining code is copyright by jocki84 and distributed under both the CC BY and ISC licences.

Raw
scrollIntoViewIfNeeded.js
/*
* This code is distributed under both CC-BY and the following ISC licence.
*
* Copyright 2015-2019 Jocki84
*
* Permission to use, copy, modify, and/or distribute this software for any
* purpose with or without fee is hereby granted, provided that the above
* copyright notice and this permission notice appear in all copies.
*
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
*/
if (!Element.prototype.scrollIntoViewIfNeeded) {
Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
"use strict";
function makeRange(start, length) {
return {"start": start, "length": length, "end": start + length};
}
function coverRange(inner, outer) {
if (
false === centerIfNeeded ||
(outer.start < inner.end && inner.start < outer.end)
) {
return Math.max(
inner.end - outer.length,
Math.min(outer.start, inner.start)
);
}
return (inner.start + inner.end - outer.length) / 2;
}
function makePoint(x, y) {
return {
"x": x,
"y": y,
"translate": function translate(dX, dY) {
return makePoint(x + dX, y + dY);
}
};
}
function absolute(elem, pt) {
while (elem) {
pt = pt.translate(elem.offsetLeft, elem.offsetTop);
elem = elem.offsetParent;
}
return pt;
}
var target = absolute(this, makePoint(0, 0)),
extent = makePoint(this.offsetWidth, this.offsetHeight),
elem = this.parentNode,
origin;
while (elem instanceof HTMLElement) {
// Apply desired scroll amount.
origin = absolute(elem, makePoint(elem.clientLeft, elem.clientTop));
elem.scrollLeft = coverRange(
makeRange(target.x - origin.x, extent.x),
makeRange(elem.scrollLeft, elem.clientWidth)
);
elem.scrollTop = coverRange(
makeRange(target.y - origin.y, extent.y),
makeRange(elem.scrollTop, elem.clientHeight)
);
// Determine actual scroll amount by reading back scroll properties.
target = target.translate(-elem.scrollLeft, -elem.scrollTop);
elem = elem.parentNode;
}
};
}
Raw
test-both.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--
- This code is distributed under both CC-BY and the following ISC licence.
-
- Copyright 2015-2019 Jocki84
-
- Permission to use, copy, modify, and/or distribute this software for any
- purpose with or without fee is hereby granted, provided that the above
- copyright notice and this permission notice appear in all copies.
-
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
- WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
- MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
- ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
- WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
- ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
- OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
-->
<style type="text/css">
div.block {
display: inline-block;
width: 2em;
height: 2em;
border: thick solid blue;
}
div.outer-window {
/*position: relative;*/
width: 9.5em;
height: 9.5em;
overflow: scroll;
}
div.window {
display: inline-block;
/*position: relative;*/
width: 7.5em;
height: 7.5em;
overflow: scroll;
border: thick solid black;
}
div.line {
width: 30em;
border: thick solid green;
}
table {
display: inline-block;
}
</style>
<script src="scrollIntoViewIfNeeded.js"></script>
<script type="text/javascript">
document.documentElement.addEventListener("click", function (evt) {
var elem, target = evt.target;
while (target && "TD" !== target.nodeName) {
target = target.parentNode;
}
if (target) {
elem = document.getElementById(target.textContent);
if (elem) {
elem.scrollIntoViewIfNeeded();
}
}
});
</script>
</head>
<body>
<div>
<table>
<tr><td>00</td><td>01</td><td>02</td></tr>
<tr><td>03</td><td>04</td><td>05</td></tr>
<tr><td>06</td><td>07</td><td>08</td></tr>
</table>
<table>
<tr><td>10</td><td>11</td><td>12</td></tr>
<tr><td>13</td><td>14</td><td>15</td></tr>
<tr><td>16</td><td>17</td><td>18</td></tr>
</table>
<table>
<tr><td>20</td><td>21</td><td>22</td></tr>
<tr><td>23</td><td>24</td><td>25</td></tr>
<tr><td>26</td><td>27</td><td>28</td></tr>
</table>
</div>
<div>
<table>
<tr><td>30</td><td>31</td><td>32</td></tr>
<tr><td>33</td><td>34</td><td>35</td></tr>
<tr><td>36</td><td>37</td><td>38</td></tr>
</table>
<table>
<tr><td>40</td><td>41</td><td>42</td></tr>
<tr><td>43</td><td>44</td><td>45</td></tr>
<tr><td>46</td><td>47</td><td>48</td></tr>
</table>
<table>
<tr><td>50</td><td>51</td><td>52</td></tr>
<tr><td>53</td><td>54</td><td>55</td></tr>
<tr><td>56</td><td>57</td><td>58</td></tr>
</table>
</div>
<div>
<table>
<tr><td>60</td><td>61</td><td>62</td></tr>
<tr><td>63</td><td>64</td><td>65</td></tr>
<tr><td>66</td><td>67</td><td>68</td></tr>
</table>
<table>
<tr><td>70</td><td>71</td><td>72</td></tr>
<tr><td>73</td><td>74</td><td>75</td></tr>
<tr><td>76</td><td>77</td><td>78</td></tr>
</table>
<table>
<tr><td>80</td><td>81</td><td>82</td></tr>
<tr><td>83</td><td>84</td><td>85</td></tr>
<tr><td>86</td><td>87</td><td>88</td></tr>
</table>
</div>
<p>
The items above are arranged in nested scroll containers below.
Click an item in the table above and watch it scrollIntoViewIfNeeded below.
</p>
<div class="outer-window"
><div class="line"
><div class="window"
><div class="line"
><div id="00" class="block">00</div
><div id="01" class="block">01</div
><div id="02" class="block">02</div
></div><div class="line"
><div id="03" class="block">03</div
><div id="04" class="block">04</div
><div id="05" class="block">05</div
></div><div class="line"
><div id="06" class="block">06</div
><div id="07" class="block">07</div
><div id="08" class="block">08</div
></div
></div
><div class="window"
><div class="line"
><div id="10" class="block">10</div
><div id="11" class="block">11</div
><div id="12" class="block">12</div
></div><div class="line"
><div id="13" class="block">13</div
><div id="14" class="block">14</div
><div id="15" class="block">15</div
></div><div class="line"
><div id="16" class="block">16</div
><div id="17" class="block">17</div
><div id="18" class="block">18</div
></div
></div
><div class="window"
><div class="line"
><div id="20" class="block">20</div
><div id="21" class="block">21</div
><div id="22" class="block">22</div
></div><div class="line"
><div id="23" class="block">23</div
><div id="24" class="block">24</div
><div id="25" class="block">25</div
></div><div class="line"
><div id="26" class="block">26</div
><div id="27" class="block">27</div
><div id="28" class="block">28</div
></div
></div
></div
><div class="line"
><div class="window"
><div class="line"
><div id="30" class="block">30</div
><div id="31" class="block">31</div
><div id="32" class="block">32</div
></div><div class="line"
><div id="33" class="block">33</div
><div id="34" class="block">34</div
><div id="35" class="block">35</div
></div><div class="line"
><div id="36" class="block">36</div
><div id="37" class="block">37</div
><div id="38" class="block">38</div
></div
></div
><div class="window"
><div class="line"
><div id="40" class="block">40</div
><div id="41" class="block">41</div
><div id="42" class="block">42</div
></div><div class="line"
><div id="43" class="block">43</div
><div id="44" class="block">44</div
><div id="45" class="block">45</div
></div><div class="line"
><div id="46" class="block">46</div
><div id="47" class="block">47</div
><div id="48" class="block">48</div
></div
></div
><div class="window"
><div class="line"
><div id="50" class="block">50</div
><div id="51" class="block">51</div
><div id="52" class="block">52</div
></div><div class="line"
><div id="53" class="block">53</div
><div id="54" class="block">54</div
><div id="55" class="block">55</div
></div><div class="line"
><div id="56" class="block">56</div
><div id="57" class="block">57</div
><div id="58" class="block">58</div
></div
></div
></div
><div class="line"
><div class="window"
><div class="line"
><div id="60" class="block">60</div
><div id="61" class="block">61</div
><div id="62" class="block">62</div
></div><div class="line"
><div id="63" class="block">63</div
><div id="64" class="block">64</div
><div id="65" class="block">65</div
></div><div class="line"
><div id="66" class="block">66</div
><div id="67" class="block">67</div
><div id="68" class="block">68</div
></div
></div
><div class="window"
><div class="line"
><div id="70" class="block">70</div
><div id="71" class="block">71</div
><div id="72" class="block">72</div
></div><div class="line"
><div id="73" class="block">73</div
><div id="74" class="block">74</div
><div id="75" class="block">75</div
></div><div class="line"
><div id="76" class="block">76</div
><div id="77" class="block">77</div
><div id="78" class="block">78</div
></div
></div
><div class="window"
><div class="line"
><div id="80" class="block">80</div
><div id="81" class="block">81</div
><div id="82" class="block">82</div
></div><div class="line"
><div id="83" class="block">83</div
><div id="84" class="block">84</div
><div id="85" class="block">85</div
></div><div class="line"
><div id="86" class="block">86</div
><div id="87" class="block">87</div
><div id="88" class="block">88</div
></div
></div
></div
></div>
</body>
</html>
Raw
test-horizontal.html
<!DOCTYPE html>
<title>scrollIntoViewIfNeeded test page</title>
<style type="text/css">
body {
font: 14px Arial;
}
#scroll-area {
border: 1px solid #AAA;
height: 7em;
margin: 0;
overflow: auto;
padding: 0;
width: 400px;
white-space: nowrap;
}
#scroll-area li {
background: #EEE;
border-radius: 5px;
display: inline-block;
list-style: none;
padding: 5px 10px;
}
#scroll-area li:nth-child(2n+1) {
background: #DDD;
text-align: right;
}
#scroll-area li.selected {
background: #BADA55;
}
</style>
<h1>scrollIntoViewIfNeeded test page</h1>
<ul id="scroll-area"><li class="selected">item #0</li><li>item #1</li><li>item #2</li><li>item #3</li><li>item #4</li><li>item #5</li><li>item #6</li><li>item #7</li><li>item #8</li><li>item #9</li><li>item #10</li><li>item #11</li><li>item #12</li><li>item #13</li><li>item #14</li><li>item #15</li><li>item #16</li><li>item #17</li><li>item #18</li><li>item #19</li><li>item #20</li><li>item #21</li><li>item #22</li><li>item #23</li><li>item #24</li><li>item #25</li><li>item #26</li><li>item #27</li><li>item #28</li><li>item #29</li><li>item #30</li><li>item #31</li><li>item #32</li><li>item #33</li><li>item #34</li><li>item #35</li><li>item #36</li><li>item #37</li><li>item #38</li><li>item #39</li><li>item #40</li><li>item #41</li><li>item #42</li><li>item #43</li><li>item #44</li><li>item #45</li><li>item #46</li><li>item #47</li><li>item #48</li><li>item #49</li><li>item #50</li><li>item #51</li><li>item #52</li><li>item #53</li><li>item #54</li><li>item #55</li><li>item #56</li><li>item #57</li><li>item #58</li><li>item #59</li><li>item #60</li><li>item #61</li><li>item #62</li><li>item #63</li><li>item #64</li><li>item #65</li><li>item #66</li><li>item #67</li><li>item #68</li><li>item #69</li><li>item #70</li><li>item #71</li><li>item #72</li><li>item #73</li><li>item #74</li><li>item #75</li><li>item #76</li><li>item #77</li><li>item #78</li><li>item #79</li><li>item #80</li><li>item #81</li><li>item #82</li><li>item #83</li><li>item #84</li><li>item #85</li><li>item #86</li><li>item #87</li><li>item #88</li><li>item #89</li><li>item #90</li><li>item #91</li><li>item #92</li><li>item #93</li><li>item #94</li><li>item #95</li><li>item #96</li><li>item #97</li><li>item #98</li><li>item #99</li></ul>
<div id="buttons-centerFalse">
<span><code>scrollIntoViewIfNeeded(false)</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<div id="buttons-centerTrue">
<span><code>scrollIntoViewIfNeeded(true)</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<div id="buttons-centerUndefined">
<span><code>scrollIntoViewIfNeeded(undefined)</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<div id="buttons-centerNoArgs">
<span><code>scrollIntoViewIfNeeded()</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<script src="scrollIntoViewIfNeeded.js"></script>
<script>
(function () {
var scrollArea = document.getElementById('scroll-area'),
buttonsCenterFalse = document.getElementById('buttons-centerFalse'),
buttonsCenterTrue = document.getElementById('buttons-centerTrue'),
buttonsCenterUndefined = document.getElementById('buttons-centerUndefined'),
buttonsCenterNoArgs = document.getElementById('buttons-centerNoArgs'),
scrollIntoViewIfNeededToItemAndSelect;
scrollIntoViewIfNeededToItemAndSelect = function (itemIdx, centerIfNeeded) {
scrollArea.querySelector('.selected').className = '';
// Allow us to really have difference bewteen scrollIntoViewIfNeeded() and scrollIntoViewIfNeeded(undefined)
if (arguments.length === 1) {
scrollArea.children[itemIdx].scrollIntoViewIfNeeded();
} else {
scrollArea.children[itemIdx].scrollIntoViewIfNeeded(centerIfNeeded);
}
scrollArea.children[itemIdx].className = 'selected';
};
buttonsCenterFalse.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, false);
}
}, false);
buttonsCenterTrue.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, true);
}
}, false);
buttonsCenterUndefined.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, undefined);
}
}, false);
buttonsCenterNoArgs.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx);
}
}, false);
})();
</script>
Raw
test-vertical.html
<!DOCTYPE html>
<title>scrollIntoViewIfNeeded test page</title>
<style type="text/css">
body {
font: 14px Arial;
}
#scroll-area {
border: 1px solid #AAA;
height: 7em;
margin: 0;
overflow: auto;
padding: 0;
}
#scroll-area li {
background: #EEE;
border-radius: 5px;
list-style: none;
padding: 5px 10px;
}
#scroll-area li:nth-child(2n+1) {
background: #DDD;
}
#scroll-area li.selected {
background: #BADA55;
}
</style>
<h1>scrollIntoViewIfNeeded test page</h1>
<ul id="scroll-area"><li class="selected">item #0</li><li>item #1</li><li>item #2</li><li>item #3</li><li>item #4</li><li>item #5</li><li>item #6</li><li>item #7</li><li>item #8</li><li>item #9</li><li>item #10</li><li>item #11</li><li>item #12</li><li>item #13</li><li>item #14</li><li>item #15</li><li>item #16</li><li>item #17</li><li>item #18</li><li>item #19</li><li>item #20</li><li>item #21</li><li>item #22</li><li>item #23</li><li>item #24</li><li>item #25</li><li>item #26</li><li>item #27</li><li>item #28</li><li>item #29</li><li>item #30</li><li>item #31</li><li>item #32</li><li>item #33</li><li>item #34</li><li>item #35</li><li>item #36</li><li>item #37</li><li>item #38</li><li>item #39</li><li>item #40</li><li>item #41</li><li>item #42</li><li>item #43</li><li>item #44</li><li>item #45</li><li>item #46</li><li>item #47</li><li>item #48</li><li>item #49</li><li>item #50</li><li>item #51</li><li>item #52</li><li>item #53</li><li>item #54</li><li>item #55</li><li>item #56</li><li>item #57</li><li>item #58</li><li>item #59</li><li>item #60</li><li>item #61</li><li>item #62</li><li>item #63</li><li>item #64</li><li>item #65</li><li>item #66</li><li>item #67</li><li>item #68</li><li>item #69</li><li>item #70</li><li>item #71</li><li>item #72</li><li>item #73</li><li>item #74</li><li>item #75</li><li>item #76</li><li>item #77</li><li>item #78</li><li>item #79</li><li>item #80</li><li>item #81</li><li>item #82</li><li>item #83</li><li>item #84</li><li>item #85</li><li>item #86</li><li>item #87</li><li>item #88</li><li>item #89</li><li>item #90</li><li>item #91</li><li>item #92</li><li>item #93</li><li>item #94</li><li>item #95</li><li>item #96</li><li>item #97</li><li>item #98</li><li>item #99</li></ul>
<div id="buttons-centerFalse">
<span><code>scrollIntoViewIfNeeded(false)</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<div id="buttons-centerTrue">
<span><code>scrollIntoViewIfNeeded(true)</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<div id="buttons-centerUndefined">
<span><code>scrollIntoViewIfNeeded(undefined)</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<div id="buttons-centerNoArgs">
<span><code>scrollIntoViewIfNeeded()</code> to item : </span>
<button data-item-idx="0">#0</button>
<button data-item-idx="11">#11</button>
<button data-item-idx="22">#22</button>
<button data-item-idx="24">#24</button>
<button data-item-idx="26">#26</button>
<button data-item-idx="33">#33</button>
<button data-item-idx="44">#44</button>
<button data-item-idx="55">#55</button>
<button data-item-idx="66">#66</button>
<button data-item-idx="77">#77</button>
<button data-item-idx="82">#82</button>
<button data-item-idx="84">#84</button>
<button data-item-idx="86">#86</button>
<button data-item-idx="99">#99</button>
</div>
<script src="scrollIntoViewIfNeeded.js"></script>
<script>
(function () {
var scrollArea = document.getElementById('scroll-area'),
buttonsCenterFalse = document.getElementById('buttons-centerFalse'),
buttonsCenterTrue = document.getElementById('buttons-centerTrue'),
buttonsCenterUndefined = document.getElementById('buttons-centerUndefined'),
buttonsCenterNoArgs = document.getElementById('buttons-centerNoArgs'),
scrollIntoViewIfNeededToItemAndSelect;
scrollIntoViewIfNeededToItemAndSelect = function (itemIdx, centerIfNeeded) {
scrollArea.querySelector('.selected').className = '';
// Allow us to really have difference bewteen scrollIntoViewIfNeeded() and scrollIntoViewIfNeeded(undefined)
if (arguments.length === 1) {
scrollArea.children[itemIdx].scrollIntoViewIfNeeded();
} else {
scrollArea.children[itemIdx].scrollIntoViewIfNeeded(centerIfNeeded);
}
scrollArea.children[itemIdx].className = 'selected';
};
buttonsCenterFalse.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, false);
}
}, false);
buttonsCenterTrue.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, true);
}
}, false);
buttonsCenterUndefined.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx, undefined);
}
}, false);
buttonsCenterNoArgs.addEventListener('click', function (e) {
if (e.target.nodeName === 'BUTTON') {
scrollIntoViewIfNeededToItemAndSelect(e.target.dataset.itemIdx);
}
}, false);
})();
</script>
@wch
Copy link

wch commented Jul 12, 2019

Thanks!

@AlexsanderAMcom
Copy link

Thanks, you saved my life hahahaha

@huksley
Copy link

huksley commented Mar 15, 2022 •
edited

Here is the TypeScript version if you need one, but not a polyfill.

/*
 * This code is distributed under both CC-BY and the following ISC licence.
 *
 * Copyright 2015-2019 Jocki84
 *
 * Permission to use, copy, modify, and/or distribute this software for any
 * purpose with or without fee is hereby granted, provided that the above
 * copyright notice and this permission notice appear in all copies.
 *
 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
 */
interface Range {
  start: number;
  length: number;
  end: number;
}

interface Point {
  x: number;
  y: number;
  translate: (dX: number, dy: number) => Point;
}

function makeRange(start: number, length: number): Range {
  return { start: start, length: length, end: start + length };
}

function coverRange(inner: Range, outer: Range, centerIfNeeded?: boolean | undefined) {
  if (false === centerIfNeeded || (outer.start < inner.end && inner.start < outer.end)) {
    return Math.max(inner.end - outer.length, Math.min(outer.start, inner.start));
  }
  return (inner.start + inner.end - outer.length) / 2;
}

function makePoint(x: number, y: number): Point {
  return {
    x: x,
    y: y,
    translate: function translate(dX, dY) {
      return makePoint(x + dX, y + dY);
    }
  };
}

function absolute(elem: HTMLElement, pt: Point) {
  let e: HTMLElement | null = elem;
  while (e) {
    pt = pt.translate(elem.offsetLeft, elem.offsetTop);
    e = e.offsetParent as HTMLElement | null;
  }
  return pt;
}

interface NativelyImplemented extends HTMLElement {
  /** https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded */
  scrollIntoViewIfNeeded?: (centerIfNeeded?: boolean) => void;
}

export const scrollIntoViewIfNeeded = (element: HTMLElement, centerIfNeeded?: boolean) => {
  const e = element as NativelyImplemented;
  if (e.scrollIntoViewIfNeeded) {
    return e.scrollIntoViewIfNeeded(centerIfNeeded ?? true);
  }

  let target = absolute(element, makePoint(0, 0)),
    elem = element.parentNode,
    origin;
  const extent = makePoint(element.offsetWidth, element.offsetHeight);

  while (elem instanceof HTMLElement) {
    // Apply desired scroll amount.
    origin = absolute(elem, makePoint(elem.clientLeft, elem.clientTop));
    elem.scrollLeft = coverRange(
      makeRange(target.x - origin.x, extent.x),
      makeRange(elem.scrollLeft, elem.clientWidth),
      centerIfNeeded ?? true
    );

    elem.scrollTop = coverRange(
      makeRange(target.y - origin.y, extent.y),
      makeRange(elem.scrollTop, elem.clientHeight),
      centerIfNeeded ?? true
    );

    // Determine actual scroll amount by reading back scroll properties.
    target = target.translate(-elem.scrollLeft, -elem.scrollTop);
    elem = elem.parentNode;
  }
};

@nuxodin
Copy link

nuxodin commented May 18, 2022

Today it is much easier to polyfill "scrollIntoViewIfNeeded()":

if ( !Element.prototype.scrollIntoViewIfNeeded ) {
    Element.prototype.scrollIntoViewIfNeeded = function ( centerIfNeeded = true ) {
        const el = this;
        new IntersectionObserver( function( [entry] ) {
            const ratio = entry.intersectionRatio;
            if (ratio < 1) {
                let place = ratio <= 0 && centerIfNeeded ? 'center' : 'nearest';
                el.scrollIntoView( {
                    block: place,
                    inline: place,
                } );
            }
            this.disconnect();
        } ).observe(this);
    };
}

Source:
https://github.com/nuxodin/lazyfill/blob/main/polyfills/Element/prototype/scrollIntoViewIfNeeded.js

@huksley
Copy link

huksley commented Jun 23, 2022

The original implementation (or is it my typescript conversion?) does not work properly in Firefox 101.0.1) - it causes unnecessary scroll if the list is long and the element is not in the middle.

New version by @nuxodin works fine! Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment