IE10 reset the scrollbars (position to top-left) for a block (overflow:auto) after {display:none, display:block} sequence

问题

IE10 resets the scrollbars (position to top-left) for a block element if it is hidden and displayed. This block is part of a complex UI that shows and hides blocks from various places. The other browsers and IE versions works as expected (display back the block maintaing the scroll position as it was before hiding the block). See the issue here on jsfiddle.

HTML

Last item is visible (100).<br>
TEST : click 
<input type="button" id="hide" value="Hide"> then <input type="button" id="show" value="Show">. Now item (1) is visible (IE10 only)
<div id="divu" style="margin-top: 10px; width:200px; height:500px; border:1px solid #888; overflow:auto;">

<p class="item">1</p>
<p class="item">2</p>
<p class="item">3</p>
<p class="item">4</p>
<p class="item">5</p>
<p class="item">6</p>
<p class="item">7</p>
<p class="item">8</p>
<p class="item">9</p>
<p class="item">10</p>
<p class="item">11</p>
<p class="item">12</p>
<p class="item">13</p>
<p class="item">14</p>
<p class="item">15</p>
<p class="item">16</p>
<p class="item">17</p>
<p class="item">18</p>
<p class="item">19</p>
<p class="item">20</p>
<p class="item">21</p>
<p class="item">22</p>
<p class="item">23</p>
<p class="item">24</p>
<p class="item">25</p>
<p class="item">26</p>
<p class="item">27</p>
<p class="item">28</p>
<p class="item">29</p>
<p class="item">30</p>
<p class="item">31</p>
<p class="item">32</p>
<p class="item">33</p>
<p class="item">34</p>
<p class="item">35</p>
<p class="item">36</p>
<p class="item">37</p>
<p class="item">38</p>
<p class="item">39</p>
<p class="item">40</p>
<p class="item">41</p>
<p class="item">42</p>
<p class="item">43</p>
<p class="item">44</p>
<p class="item">45</p>
<p class="item">46</p>
<p class="item">47</p>
<p class="item">48</p>
<p class="item">49</p>
<p class="item">50</p>
<p class="item">51</p>
<p class="item">52</p>
<p class="item">53</p>
<p class="item">54</p>
<p class="item">55</p>
<p class="item">56</p>
<p class="item">57</p>
<p class="item">58</p>
<p class="item">59</p>
<p class="item">60</p>
<p class="item">61</p>
<p class="item">62</p>
<p class="item">63</p>
<p class="item">64</p>
<p class="item">65</p>
<p class="item">66</p>
<p class="item">67</p>
<p class="item">68</p>
<p class="item">69</p>
<p class="item">70</p>
<p class="item">71</p>
<p class="item">72</p>
<p class="item">73</p>
<p class="item">74</p>
<p class="item">75</p>
<p class="item">76</p>
<p class="item">77</p>
<p class="item">78</p>
<p class="item">79</p>
<p class="item">80</p>
<p class="item">81</p>
<p class="item">82</p>
<p class="item">83</p>
<p class="item">84</p>
<p class="item">85</p>
<p class="item">86</p>
<p class="item">87</p>
<p class="item">88</p>
<p class="item">89</p>
<p class="item">90</p>
<p class="item">91</p>
<p class="item">92</p>
<p class="item">93</p>
<p class="item">94</p>
<p class="item">95</p>
<p class="item">96</p>
<p class="item">97</p>
<p class="item">98</p>
<p class="item">99</p>
<p class="item selected">100</p>

</div>

... JS

$(document).ready(function(){

    $('#hide').click(function(){
        $('#divu').hide();
    });
    $('#show').click(function(){
        $('#divu').show();
    });

    $('#divu').scrollTop($('#divu')[0].scrollHeight);
});

... CSS

.item {
    margin:1px;
    padding: 2px;
    background: #eee;
}

.selected {
    background-color: #faa;
}

UNACCEPTED KNOWN SOLUTION: I do not want this 'workaround' to store 'scrollTop'/'scrollLeft' and restore them back for my app in hundreds of source-code lines only for IE10 while the other browsers works just fine. The provided code is as simple as possible just to illustrate the issue. In my real app there are iframes involved and many HTML Elements. I do not hide/show directly the block (overflow:auto) but a parent many levels up in the DOM tree. The question is why IE10 behave like this (is this a known issue of IE10?) and how can I implement a shorter/smarter solution with a minimal intervention on the existing source-code.

回答1:

Your problem will solve if you add the below line into click function

$('#divu').scrollTop($('#divu')[0].scrollHeight);

Working Demo

jQuery

$(document).ready(function(){

    $('#hide').click(function(){
        $('#divu').hide();
    });
    $('#show').click(function(){
        $('#divu').show();
        $('#divu').scrollTop($('#divu')[0].scrollHeight); /*Added this line*/
    });

    $('#divu').scrollTop($('#divu')[0].scrollHeight);
});

回答2:

I don't know what is the reason of this, but I guess you can store scrollTop value when you hide list and restore it when you show it like this:

$(document).ready(function(){
    var scrollVal; // variable

    $('#hide').click(function(){
        scrollVal = $('#divu').scrollTop();
        $('#divu').hide();
    });
    $('#show').click(function(){
        $('#divu').show();
        $('#divu').scrollTop(scrollVal);
    });

     $('#divu').scrollTop($('#divu')[0].scrollHeight);
});

Or use

$('#divu').css('visibility', 'collapse');
// ...    
$('#divu').css('visibility', 'visible');

Fiddle

Or you can overload jQuery show and hide functions with your custom logic. I think this solution will be much easy and efficient for you.

来源：https://stackoverflow.com/questions/21015145/ie10-reset-the-scrollbars-position-to-top-left-for-a-block-overflowauto-aft

标签

javascript

internet-explorer

internet-explorer-10