|
<!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> |
Here is the TypeScript version if you need one, but not a polyfill.