Scroll returns to default after display:none in Chrome/IE

Here's the example: http://jsfiddle.net/sammy/RubNy/

Scroll down in the div container. Then click anywhere in the window to hide th开发者_如何学JAVAe element. Then click once more to show the element. You'll notice in Chrome/IE that the scroll is reset, but in Firefox, the scroll remains how you left it.

Which is the standards behavior, Chrome/IE or Firefox? Should I report this to the Chrome issue tracker?

Thanks in advance for any help on this, and happy new year, and thanks again, and cheers, and stuff. =D

Although I'm not sure which of the two browsers (Chrome or Firefox) is following the standard on this one, I'll blame Chrome for being incorrect for not "remembering" the scroll position. In other words, I favor Firefox's behavior, but I'm unsure which is correct (standardized).

Until someone points out which is correct according to standard documentation, I'll continue to blame Chrome. I'll report this bug to the Chrome issue tracker if I haven't already. :P

You can save current element.scrollTop to some bufferVar before display: none. When display: block you reset element.scrollTop back to bufferVar.

But this approach won't work immediately for some reasons not obvious to me. Use something like this to make it work:

setTimeout(() => { element.scrollTop = bufferVar; }, 100);

I don't know which are right however this works:

var offset = 0;
$(document).click(function(){
    if($('div:visible').length) {
        offset = $('div').scrollTop();   
    }
    $('div').toggle().scrollTop(offset);
});

I hope somebody has a better solution =/

Its just a quirk in how the browsers render the div when the display changes...

Essentially, the browsers reflow the text when the display property changes...

This causes the same quirk...

$(document).click(function(){
    $('div').style.display = "block";
});

If you want the scroll to remain the same in all browsers, the easiest thing to use is visibility instead of display...