Question

JSFiddle：https://jsfiddle.net/rq2tvccg/14/

我有2个包含元素的DIV。任何时候只显示其中一个DIV（切换按钮切换其可见性）。我需要同时添加一个显示在两个列表中的元素。元素的ID为List1_<Random>或List2_<Random>。

问题是我需要将两个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的解决方案，这样当你切换到另一个时，你就处于预期的位置？

注意元素可以是任意高度，它们在List1与List2中不必相同，因此我们不能依赖于可见元素高度。

Answer 1

您还可以使用opacity样式尝试代码。

试试这个JSFiddle

Answer 2

您必须在scrollTop按钮点击时将列表容器的add值设置为底部（或列表的最后一个子容器）。

对于list1

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

列表2

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

<强> Updated Fiddle

Answer 3

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

添加容器

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

使用容器的高度滚动

$("#list1").animate({
    scrollTop: $('#list1 div').outerHeight()
}, 1000);

使用z-index

在两个div之间切换

.hidden {
    z-index: -1;
}

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

希望这有帮助。：）

滚动两个DIV，一个显示但另一个隐藏

3 个答案: