查找相对于父滚动div而不是窗口的偏移量

Question

我在窗口内有一个滚动元素.

假设一个分区有一个带有溢出auto的类"currentContainer",并且该分区包含大量的文本,因此它肯定足够大,可以滚动.

现在我必须根据"currentContainer"向下滚动多少来计算一些特定元素与其父滚动div(即"currentCoantainer")的偏移量.

但是在计算偏移量时,我总是得到内部子元素相对于窗口而不是"currentContainer"的偏移量.

JS FIDDLE

@Shikkediel我也尝试使用position().top而不是,offset().top但也给出了相同的结果.看看它 :

JS FIDDLE 2

请不要建议使用:

$("<reference of scrolling element").scrollTop() 
+ 
$("<reference of child element whose offset I want to calculate>").offset().top

因为这会使我的实际计算变得复杂,我将要做的除此之外.

我不想使用上述方法的原因是我试图修改现有代码已经太乱了但是在窗口方面工作得很好我只需要更新它以便它开始相对于它工作父母滚动div.

我尝试使用上面提到的方法,但它为我打开了一盒螃蟹.因为功能太紧密耦合了.所以我想如果我能得到简单直接的解决方案,即用.offset().top 其他东西替换.

---

我尝试调试代码但仍然没有运气我在http://jsfiddle.net/arpitajain/kwkm7com/添加了实际代码

PS它是实际代码但不完整我认为此错误不需要其余代码.

Answer 1

您可以从子元素的偏移量中减去父元素的偏移量.这会使你需要做的其他事情变得复杂吗？

$(".getoffset").offset().top - $(".getoffset").offsetParent().offset().top

http://jsfiddle.net/kmLr07oh/2/

Answer 2

一个普通的 Javascript 解决方案是：

const el = document.querySelector('.getoffset');
const offset = el.getBoundingClientRect().top - el.offsetParent.getBoundingClientRect().top;

小提琴： http: //jsfiddle.net/njb1xcz0/

Answer 3

这可能是您要寻找的

var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop

————————————

如果您想要背景知识，那么应该可以达到大多数目的：

// Position of first element relative to container top
var scrollTop = $(".container .element").offset().top - $(".container").offset().top;

// Position of selected element relative to container top
var targetTop = $(".container > *").offset().top - $(".container").offset().top;

// The offset of a scrollable container
var scrollOffset = scrollTop - targetTop;

// Scroll untill target element is at the top of its container
$(".container").scrollTop(scrollOffset);

另请参见：计算可滚动div内元素的顶部偏移量