Android scroll issues

[MDCode]

Hello everyone. Been quite a while

 

Anyways, I'm having a small issue on android that seems to be more of a hassle than I thought. As some of you may know, android has a bug in which scrollTop always returns 0 when the css overflow is set to auto or scroll. I'm making a chat and am trying to make it scroll supported by all devices. Now, there is a workaround for the android bug and that first setting the overflow to hidden, scrolling the chat, then setting it back to auto or scroll like:

$("#chat_container").css('overflow', 'hidden');
$("#chat_container").scrollTop($("#chat_container")[0].scrollHeight);
$("#chat_container").css('overflow', 'scroll');

The problem is that in a few versions of android, when the chat is set back to auto or scroll, it resets the scroll position to the top of, in this case, the chat_container div. If anyone could point me in the right direction, it would be greatly appreciated

[kicken]

Try reading the scroll height into a variable, then reset the overflow, then change the scroll top to the previously read height.

[MDCode]

Thanks kicken. I would never have thought of that I will try it out as soon as I get off work.

[MDCode]

Sorry I seems to have misread your post. scrollHeight will always work. The problem is that scrollTop will always return 0 when the overflow is on scroll or auto. When you change the scrollTop during the time that it is hidden, it works. However when you reset the overflow, scrollTop immediately returns to 0.

[kicken]

  On 8/25/2013 at 4:15 PM, SocialCloud said:

However when you reset the overflow, scrollTop immediately returns to 0.

Hence why my suggestion was that you change the value of scrollTop AFTER you reset the overflow property.

[MDCode]

Sorry I'm having a bit of a hard time understanding. You mean like this?

$("#chat_container").css('overflow', 'hidden');
var height = $("#chat_container")[0].scrollHeight;  // scrollHeight can be accessed when overflow is on any setting.  Not sure why to set it as a variable
$("#chat_container").css('overflow', 'auto');  // Setting this back will make the div go back to the top if you scroll when hidden
$("#chat_container").scrollTop(height); // scrollTop will not work when overflow is on auto or scroll