jQuery 查找相对于父滚动 div 而不是窗口的偏移量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29592924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find offset relative to parent scrolling div instead of window
提问by Arpita
I have a scrolling element inside a window.
我在窗口中有一个滚动元素。
Say a division having a class "currentContainer" with overflow auto and that division contains huge amount of text so that it is definitely large enough to be scrolling.
假设一个分区有一个带有溢出自动的类“currentContainer”，并且该分区包含大量文本，因此它绝对大到可以滚动。
Now I have to do some calculations based on how much the "currentContainer" has scrolled down + what is the offset of a specific element from its parent scrolling div (that is "currentCoantainer").
现在我必须根据“currentContainer”向下滚动的程度+特定元素与其父滚动div（即“currentCoantainer”）的偏移量进行一些计算。
But while calculating offset I always get the offset of the inner child element with regard to window not with the "currentContainer".
但是在计算偏移量时，我总是得到内部子元素相对于窗口的偏移量，而不是“currentContainer”。
@Shikkediel I also tried using position().topinstead of offset().topbut is is also giving the same result. Have a look at it :
@Shikkediel 我也尝试使用position().top而不是，offset().top但也给出了相同的结果。看看它 ：
Please do not suggest using :
请不要建议使用：
$("<reference of scrolling element").scrollTop()
+
$("<reference of child element whose offset I want to calculate>").offset().top
Because this is going to complicate my actual calculations which I am about to do beyond this.
因为这将使我的实际计算复杂化，而我将在此之外进行。
Reason for why I do not want to use the above mentioned approach is that I am trying to modify an existing code which is already too messy but is working perfectly with regard to window I just have to update it so that it starts working relative to its parent scrolling div.
我不想使用上述方法的原因是我正在尝试修改现有的代码，该代码已经太乱了，但在窗口方面工作得很好，我只需要更新它，以便它开始相对于它的工作父滚动 div。
I tried using above mentioned approach but it opened a box of crabs for me. because functions are too much tightly coupled. So I think if I can get simple and straight solution i.e. replacing .offset().topwith something else.
我尝试使用上述方法，但它为我打开了一盒螃蟹。因为功能过于紧密耦合。所以我想如果我能得到简单直接的解决方案，即用.offset().top其他东西代替。
I tried debugging the code and still no luck I have added the actual code at http://jsfiddle.net/arpitajain/kwkm7com/
我尝试调试代码，但仍然没有运气我在http://jsfiddle.net/arpitajain/kwkm7com/添加了实际代码
P.S. It is actual code but not complete I think The rest of the code was not needed for this error.
PS 这是实际代码但不完整我认为此错误不需要其余代码。
采纳答案by Tim Mullen
You could just subtract the offset of the parent element from the offset of the child element. Will that complicate the other things you need to do as well?
您可以从子元素的偏移量中减去父元素的偏移量。这会使您需要做的其他事情也变得复杂吗？
$(".getoffset").offset().top - $(".getoffset").offsetParent().offset().top
回答by Quinn Keaveney
This is probably what you are looking for
这可能就是你要找的
var scrollOffset = $(".container .element")[0].offsetTop - $(".container")[0].offsetTop
———————————
———————————
If you want background this should get you most of the way there:
如果您想要背景，这应该可以帮助您完成大部分工作：
// 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);
Also see: Calculate offset top of elements inside of a scrollable div
另请参阅：计算可滚动 div 内元素的顶部偏移量
回答by andreivictor
A vanilla Javascript solution would be:
一个普通的 Javascript 解决方案是：
const el = document.querySelector('.getoffset');
const offset = el.getBoundingClientRect().top - el.offsetParent.getBoundingClientRect().top;
Fiddle: http://jsfiddle.net/njb1xcz0/
回答by Corxit Sun
In my test
在我的测试中
//has the same value
console.log(
'compare:',
$("#element").offset().left - $("#container").offset().left,
$("#element").position().left
);
Witch mean it gets absolute positionto parent. To get relative positionto parent, I use:
女巫意味着它获得了父级的绝对位置。为了获得与父母的相对位置，我使用：
let relative_position_x = Element.position().left + scroller.scrollLeft();
let relative_position_y = Element.position().top + scroller.scrollTop();
