滚动两个DIVs，一个显示，另一个隐藏
滚动两个DIVs，一个显示，另一个隐藏
提问于 2018-01-15 16:28:27
JSFiddle：https://jsfiddle.net/rq2tvccg/14/
我有两个DIVs，其中包含元素。任何时候都只显示一个DIVs ( Toggle按钮切换其可见性)。我需要同时添加一个元素，显示在两个列表中。元素的ID是List1_<Random>或List2_<Random>。
问题是，我需要滚动两个DIVs到刚刚添加的相关元素。但是这不起作用，因为隐藏的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); 是否有一个解决方案来滚动两个DIVs，这样，当您切换到另一个，您是在预期的位置？
注意到元素可以是任意高度的，在List1和List2中它们不一定是相同的，所以我们不能依赖可见元素的高度。
回答 3
Stack Overflow用户
发布于 2018-01-15 16:55:16
您还可以使用opacity样式尝试代码。
试试这个JSFiddle
Stack Overflow用户
发布于 2018-01-15 16:47:24
在单击scrollTop按钮时，必须将两个列表容器的add值设置为底部(或列表的最后一个子元素)。
对于list1
$("#list1").animate({scrollTop: $('#list1 li:last-child').position().top},0); 表2
$("#list2").animate({scrollTop: $('#list2 li:last-child').position().top},0); Stack Overflow用户
发布于 2018-01-15 17:03:06
我建议添加一个容器div来查找添加的项的总高度，并使用它来设置滚动偏移量。我也使用z-index在两个div之间切换。试试这个小提琴
添加容器
<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")
}希望能帮上忙。:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48267023
复制相关文章
相似问题
腾讯云开发者
