Javascript 滚动两个div，一个显示，另一个隐藏

JSFiddle：

我有两个包含元素的div。任何时候都只显示一个div（切换按钮切换其可见性）。我需要同时添加一个元素，它显示在两个列表中。该元素的ID是

List1\uu

或

List2\uu

问题是我需要将两个div滚动到刚刚添加的相应元素。但这不起作用，因为隐藏的DIV（无论哪一个）无法正确处理以下表达式之一：

// 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); 

是否有一种解决方案可以滚动两个div，这样当您切换到另一个div时，您就处于预期的位置

---

注意元素可以是任意高度，它们在列表1和列表2中不必相同，因此我们不能依赖可见元素的高度。

您必须在

添加

按钮上将两个列表容器的

滚动顶部

值设置为底部（或列表的最后一个子级）

对于列表1

$("#list1").animate({scrollTop: $('#list1 li:last-child').position().top},0); 

对于清单2

$("#list2").animate({scrollTop: $('#list2 li:last-child').position().top},0); 

---

您也可以使用

不透明度
样式来尝试代码

试试这个
我建议添加一个container div来查找添加的项目的总高度，并使用它来设置滚动偏移。我也在使用
z-index
在两个div之间切换。试试这个

添加容器

<div class="list" id="list1">
  <div>    <!-- Container to find height -->
    <li>Item 1.1</li> ...
  </div>
</div>

使用z索引在两个div之间切换

.hidden {
    z-index: -1;
}

if ($('#list1').hasClass("hidden")) {
    $('#list1').removeClass("hidden")
    $('#list2').addClass("hidden")
}

希望这有帮助。：）
 在div变为可见时执行代码。当元素不在视图中时，不能更改其滚动位置。或者，通过“显示：无”以外的其他方式隐藏非活动列表：应用“位置：绝对”，只需切换“z索引”即可将目标列表向前移动。在这种情况下，您可以滚动两个容器。您也可以尝试使用
opacity
style来实现此效果。
.hidden {
    z-index: -1;
}

if ($('#list1').hasClass("hidden")) {
    $('#list1').removeClass("hidden")
    $('#list2').addClass("hidden")
}