Scroll position lost when hiding div

Question

If you show the div. Change the scroll position and then hide and show it agian the scroll position is lost.

am I doing anything wrong or is this a bug. Is there a way round it with som plugins.

/Anders

Thanks for the answers and solutions. But what if the div that I hide is a outer div and the scrolling div is deep inside the div I hide. Is there a smart way to also fix this. Becuse now I cant set/save the scroll position in the callback of the hide/show

This is expected behavior, as you cannot set the scroll value of a hidden element. — jeffjenx, Jun 11 '12 at 14:57
that is expected, you would have to store the scroll position and reset it on show — DisplayName, Jun 11 '12 at 14:58
I tried it with FF and it works. Chrome have problem with scroll position saving. — vinculis, Jun 11 '12 at 15:06

AbstractChaos · Accepted Answer · 2014-03-13T16:58:53.913

5

Jquery's .scrollTop() works well if you maintain the position as data.

$('#cbxShowHide').click(function(){
    if(this.checked) {
        $('#block').show('fast',function() {
            $(this).scrollTop($(this).data('scroll'));
        });
    }
    else {
       $('#block').data('scroll',$('#block').scrollTop());
        $('#block').hide('fast');
    }
});

example

edited Mar 13 '14 at 16:58

answered Jun 11 '12 at 15:10

AbstractChaos

4,211
1
19
28

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

This is normal behaviour because the element is set to the least possible variables to memory when you hide it. If you want to remember scroll position you'll have to store those yourself and then apply the scroll position on showing it.

Scroll Position of div with "overflow: auto"

edited May 23 '17 at 12:07

Community

1
1

answered Jun 11 '12 at 15:00

Tschallacka

27,901
14
88
133

Scroll position lost when hiding div

2 Answers2

Linked