滚动到绝对定位的父 div 内的 div，高度不断变化

这是我的身体：

body
{
height:100%;
width:100%;
margin:0;
padding:0;  
overflow:hidden;
overflow-y:hidden;
-webkit-overflow-scrolling:auto;
/* aesthetic stuff */
}

这是.pagediv：

.page
{
position:absolute; 
top:0; 
bottom:0;
left:0; 
right:0;
margin-top:60px;
z-index:1;
overflow-y:scroll; 
-webkit-overflow-scrolling:touch;   
/* aesthetic stuff */
}

这是列表项div

.item
{
position:relative;
height:80px;
width:100%;
margin:0;
padding:0;
/* aesthetic stuff */
}

以下是一些HTML：

<body>
<div id="pages-1" class="page"></div>
</body>

.page会动态填充以下未指定数量：

<div class="item">Unique Item Content</div>

当您单击.itemdiv 时，.hide()调用未指定数量的其他.itemdiv，以过滤掉它们。然后，我将单击的.item滚动到window的顶部，没问题。

但是，当您再次单击选定的.item以取消选择它时，以前隐藏的所有.item实例现在都会.show()调用它们，将先前选择的，现在未选择的.item发送到相对于.page和window的新位置。

当您第一次选择所选.item时，滚动到所选的顶部没有问题。但是在.item位于未过滤的.itemdiv 集底部的实例上，当您取消选择它时，我根本无法让它滚动到该项目的顶部。我什至无法靠近。编辑：当我说我无法接近它时，我的意思是，它甚至不在视口中一英里。结束编辑现在，在.item不在div 集底部的实例上，在取消选择时滚动到它大多有效。但是在向底部的.item上，而不是接近。

我尝试在取消选择后使用它的当前($(el).position()).top，在过滤掉其他divs之前，我尝试将其原始position.top存储在首次选择时的 jQuerydata中。我已经尝试了多种组合。

我开始认为这是一个失败的事业。也许这与.page被absolute定位有关，但由于其他原因，我无法改变这一点。

更新

进一步检查：

// $('.item.certain-ones').not(el).hide(); or $('.item').not(el).show(); here
alert($(el).position().top);
$('.page').scrollTop($(el).position().top);
alert($(el).position().top);

结果： - 选择时：140，然后 0 - 取消选择时：0，然后 1700

所以我尝试运行两次scrollTop，看看有什么抖动：

// $('.item.certain-ones').not(el).hide(); or $('.item').not(el).show(); here   
alert($(el).position().top);
$('.page').scrollTop($(el).position().top);
alert($(el).position().top);
$('.page').scrollTop($(el).position().top);
alert($(el).position().top);

结果：

选择时：140，然后是 0，然后是 140
0，然后是 1240(在视口中不可见完)

但。。。

如果在选择.item后，我手动向上滚动一点点，则在取消选择时，该项目将完全保持在视口中的位置：

选择时：140，然后是 0，然后是 140
向上滚动一点...
取消选择时：73，然后是 1167，然后是 73(完全在视口中，好像其他要素不仅显示在其上方和下方;它甚至没有明显移动)。

但是，如果我手动向下滚动一点，结果与我根本没有手动滚动一样(见上文，例如，1240，然后是 0，然后是 1240)，即在视口中不可见。

所以我的各种测试，特别是当我手动向上滚动时，它会以某种方式重置视口，以便$(this).position().top被"识别"。我不知道如何解释它，但我尝试了这个，它 100% 解决了我的问题，并且每次都直接滚动到未选择元素的精确顶部：

$('.page').scrollTop(0).scrollTop($(el).position().top);

其中el是单击的.item。

完美工作。

你只需要在.page到.item顶部使用 .scrollTop()：

var hide = false;
$('.item').click(function(){
if(hide){
$('.item').show();
$('.page').scrollTop($(this).position().top);
}else{
$('.item:nth-child(2n)').not(this).hide();
$(this).show();
}
hide = !hide;
});

body
{
height:100%;
width:100%;
margin:0;
padding:0;  
overflow:hidden;
overflow-y:hidden;
-webkit-overflow-scrolling:auto;
/* aesthetic stuff */
}
.page
{
position:absolute; 
top:0; 
bottom:0;
left:0; 
right:0;
margin-top:60px;
z-index:1;
overflow-y:scroll; 
-webkit-overflow-scrolling:touch;   
/* aesthetic stuff */
}
.item
{
position:relative;
height:80px;
width:100%;
margin:0;
padding:0;
/* aesthetic stuff */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="pages-1" class="page">
<div class="item">Unique Item Content1</div>
<div class="item">Unique Item Content2</div>
<div class="item">Unique Item Content3</div>
<div class="item">Unique Item Content4</div>
<div class="item">Unique Item Content5</div>
</div>
</body>
</html>

相关内容

最新更新

热门标签：