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

Question

我在 window 中有一个滚动元素。

假设一个 division 有一个 class "currentContainer" 并且 division 包含大量的文本，所以它绝对足够大滚动。

现在我必须根据 "currentContainer" 向下滚动的量 + 特定元素相对于其父滚动 div 的偏移量进行一些计算（即 "currentCoantainer").

但是在计算偏移量时，我总是得到关于 window 而不是 "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

因为这会使我将要做的实际计算复杂化。

我不想使用上述方法的原因是我正在尝试修改现有代码，该代码已经太乱了，但在 window 方面工作得很好我只需要更新以便它开始相对于其父滚动工作 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

这可能就是您要找的东西

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

在 Vanilla JS 中

var scrollOffset = document.querySelector('.container .element').offsetTop - document.querySelector('.container').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);

另见：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;

Fiddle: http://jsfiddle.net/njb1xcz0/

Answer 4

在我的测试中

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

表示它获得 绝对位置 到 parent。要获得 相对位置 到 parent，我使用：

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

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

Find offset relative to parent scrolling div instead of window

css

jquery

scroll

overflow

scrolltop