滚动到div并在高度变化的绝对位置父div内部

Question

Here's my body: 这是我的身体：

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

Here's the .page div: 这是.page div：

.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 */
}

Here's the list item div 这是列表项div

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

Here's some HTML : 这是一些HTML ：

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

.page gets filled dynamically with an unspecified number of these: .page会动态填充未指定的数量：

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

When you click on an .item div, an unspecified number of other .item divs get .hide() called on them, to filter them out. 当您单击.item div时，未指定数量的其他.item div会调用.item .hide() ，以将其过滤掉。 I then scroll the clicked .item to the top of the window , no problem. 然后，我将单击的.item滚动到window顶部，没问题。

But when you click on the selected .item again, to unselect it, all the .item instances that were previously hidden now get .show() called on them, sending the previously selected, now unselected .item to a new position relative to .page and to window . 但是，当再次单击选定的.item取消选择时，所有先前隐藏的.item实例现在都将.show() ，从而将先前选定的，现在未选定的.item发送到相对于的新位置.page和window 。

I don't have an issue scrolling to the top of selected .item when you first select it. 首次选择它时，滚动到所选.item的顶部没有任何问题。 But on .item instances that live toward the bottom of the unfiltered set of .item divs, when you unselect it I cannot get it to scroll to the top of that item at all . 但在.item情况下，居住向未过滤集的底部.item div的，当你不选择它，我不能让它滚动到该项目的顶部的。 I can't even get anywhere close. 我什至无法接近任何地方。 EDIT: When I say I can't get it anywhere close, I mean, it's not even in the viewport by a mile. 编辑：当我说我无法在任何地方靠近它时，我的意思是，它甚至不在视口中一英里。 END EDIT Now on .item instances that are not toward the bottom of the set of divs, scrolling to it upon unselect mostly works. 结束编辑现在，在不朝向div集合底部的.item实例上，在取消选择后滚动至该实例最有效。 But on an .item toward the bottom, not close. 但是在靠近底部的.item ，不是关闭的。

I've tried using its current ($(el).position()).top after it is unselected, I've tried storing its original position.top in jQuery data when it is first selected, prior to filtering out the other divs . 取消选择后，我尝试使用其当前的($(el).position()).top ，尝试将其最初的position.top ($(el).position()).top存储在jQuery data时，首先将其选中，然后滤除其他divs 。 I've tried combinations of things. 我已经尝试过组合事物。

I'm starting to think it's a lost cause. 我开始认为这是一个失败的事业。 Maybe it has to do with .page being absolute positioned, but I can't change that for other reasons. 也许与.page的absolute位置有关，但是由于其他原因，我无法更改它。

UPDATE UPDATE

Further tests: 进一步测试：

// $('.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);

Results: - On Select: 140, then 0 - On Deselect: 0, then 1700 结果：-选择时：140，然后为0-取消选择：0，然后为1700

So I tried running the scrollTop twice, to see what shakes out: 因此，我尝试两次运行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);

Results: 结果：

On Select: 140, then 0, then 140 选择时：140，然后0，然后140
On Deselect: 1240, then 0, then 1240 (not visible in viewport at end) 取消选择时：1240，然后是0，然后是1240（在视口末端不可见）

But... 但...

If after selecting the .item , I manually scroll UP just a little bit, the item stays exactly where it was in the viewport on deselect: 如果在选择.item ，我手动向上滚动了一点，则该项在取消选择时保持在视口中的确切位置：

On Select: 140, then 0, then 140 选择时：140，然后0，然后140
Scroll up a tad ... 向上滚动一点...
On Deselect: 73, then 1167, then 73 (perfectly in viewport, as if the other elements had not just been shown above and below it; it doesn't even move visibly). 在“取消选择”上：73，然后是1167，然后是73（完全在视口中，就好像其他元素没有刚刚显示在其上方和下方；它甚至没有明显地移动）。

However, if I manually scroll DOWN a tad, the results are the same as if I didn't manually scroll at all (see above, eg, 1240, then 0, then 1240), ie, not close to being visible in viewport. 但是，如果我手动向下滚动，则结果与完全没有手动滚动的结果相同（请参见上文，例如1240，然后是0，然后是1240），即，在视口中看不到。

Answer 1

So my various tests, particularly where when I manually scrolled up, it somehow reset the viewport so that $(this).position().top became "recognized." 因此，我进行了各种测试，尤其是当我手动向上滚动时，它以某种方式重置了视口，从而使“ $(this).position().top变得“可识别”。 I don't know how to explain it, but I tried this and it solves my problem 100% and scrolls directly to the precise top of the unselected element every single time: 我不知道如何解释它，但是我尝试了一下，它100％解决了我的问题，并且每次都直接滚动到未选中元素的精确顶部：

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

where el is the clicked .item . el是单击的.item 。

Works perfectly. 完美运作。

Answer 2

You just need to use .scrollTop() on .page to the .item top: 你只需要使用.scrollTop（）上.page到.item顶：

 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>

滚动到div并在高度变化的绝对位置父div内部

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-01-23 19:49:28

解决方案2
0 2018-01-23 18:37:58

滚动到div并在高度变化的绝对位置父div内部

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-01-23 19:49:28

解决方案2 0 2018-01-23 18:37:58

解决方案1
1 已采纳 2018-01-23 19:49:28

解决方案2
0 2018-01-23 18:37:58