Найти смещение относительно родительского прокрутки div вместо окна

У меня есть прокручиваемый элемент внутри окна.

Произнесите раздел с классом "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/

P.S. Это фактический код, но не полный. Я думаю, что остальная часть кода не нужна для этой ошибки.

Ответ 1

Вы можете просто вычесть смещение родительского элемента из смещения дочернего элемента. Будет ли это усложнять другие вещи, которые вам нужно сделать?

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

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

Ответ 2

Это, вероятно, то, что вы ищете

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.

Ответ 3

Ванильное решение Javascript будет выглядеть так:

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

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