Question

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

说一个分组有一个＆＃34; currentContainer＆＃34;溢出自动，并且该分区包含大量文本，因此它绝对足以滚动。

现在我必须根据＆＃34; currentContainer＆＃34;的数量做一些计算。向下滚动+特定元素与其父滚动div的偏移量（即＆＃34; currentCoantainer＆＃34;）。

但是在计算偏移时，我总是得到内部子元素相对于窗口的偏移而不是＆＃34; currentContainer＆＃34;。

@Shikkediel我也尝试使用position().top代替offset().top，但也提供相同的结果。看看吧：

请不要建议使用：

$("<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/

添加了实际代码

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

Answer 1

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

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

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

Answer 2

我认为这应该可以帮到你的大部分地方：

// 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);

-----------

编辑（2018年5月31日）

我想这更好：

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

来自Calculate offset top of elements inside of a scrollable div

Answer 3

原始的Javascript解决方案是：

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

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

Answer 4

在我的测试中

//has the same value
console.log(
    'compare:',
    $("#element").offset().left - $("#container").offset().left,
    $("#element").position().left
);

女巫的意思是它获得了绝对位置给父母。为了获得相对位置给父母，我使用：

let relative_position_x = Element.position().left + scroller.scrollLeft();
let relative_position_y = Element.position().top + scroller.scrollTop();

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

4 个答案: