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

Posted 2023-03-06

【中文标题】查找相对于父滚动 div 而不是窗口的偏移量

【英文标题】：Find offset relative to parent scrolling div instead of window

【发布时间】：2015-06-18 00:45:20

【问题描述】：

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

假设一个具有自动溢出类“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/添加了实际代码

附：这是实际代码但不完整我认为此错误不需要其余代码。

【问题讨论】：

不太清楚你在问什么，但看看.position()，这是相对于父级的偏移量。

好的，我会重新定义我的句子。

干杯。一个好的描述会增加找到解决方案的机会。 :-)

抱歉英语不好，但我已经尝试详细解释，如果我无法解释，请告诉我。

你的问题还不清楚。你能用示例'px'单位和一些mspaint图像提示解释一下吗？

【参考方案1】：

这可能就是你要找的东西

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

在原版 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

【讨论】：

答案的编辑部分完全符合我的预期。

【参考方案2】：

在我的测试中

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

【参考方案3】：

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

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

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

【讨论】：

不起作用，结果数字太大了。滚动 div 之前的整个空间也被添加，这是不正确的。

在我发布的小提琴中，使用 vanilla JS 计算的值与通过 jquery 计算的值相同。请提供一个小提琴，以便我可以重现您的问题。

我认为我的滚动容器可能错过了另一条评论提到的position: relative。我找到的关于该主题的答案都没有包含这一点，否则offsetTop（任何解决方案的主要部分）都不起作用。

【参考方案4】：

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

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

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

【讨论】：

很好的答案，谢谢！