Check out my JSFiddle here: https://jsfiddle.net/rq2tvccg/14/
I'm working on a project with 2 DIVs that each contain elements. Only one of the DIVs is displayed at a time, toggled by a button. I need to add an element that appears in both lists simultaneously. The Element's ID can be either List1_<Random> or List2_<Random>.
The problem arises when trying to scroll both DIVs to the newly added element. Due to one of the DIVs being hidden, scrolling using jQuery doesn't work as expected:
// Scroll to NEW for List 1
var elemAdded1 = $('#List1_' + id);
var pos1 = $(elemAdded1).position().top;
$("#list1").animate({scrollTop: pos1},1000);
// Scroll to NEW for List 2
var elemAdded2 = $('#List2_' + id);
var pos2 = $(elemAdded2).position().top;
$("#list2").animate({scrollTop: pos2},1000);
Is there a way to adjust the scrolling of both DIVs so that switching between them positions the view correctly?
Please note: The elements may vary in height between List1 and List2, so relying on visible element height won't work.