Getting element position from the top of scrolled container div in Angularjs directive

Question

I have a simple structure div named scrollContainer with overflow-y:scroll rule and an inner larger div called inner.

In the inner div I have some texts and an input. On the input I have an attribute directive called getPosition applied, which should return on scroll event the exact position of the input relative to the top of scrollContainer.

This is what I need:

Here is the sample angular app: https://codepen.io/neptune01/pen/vapmLQ

As you can see, tried with offsetTop and other dom properties, but I couldn't find anything that would result what I need.

codeWonderland · Accepted Answer · 2018-07-30 12:43:39Z

2

I would recommend using a combination of getBoundingClientRect() and the current scroll position to accomplish this like so:

let outer = document.getElementById('scrollContainer');
let inner = document.getElementById('inner');

let outerTop = outer.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);
let innerTop = inner.getBoundingClientRect().top + (window.scrollY || window.pageYOffset);

let difference = innerTop - outerTop;

The reason you wouldn't just subtract outer top from inner top in the first place and ignore the scroll position is because on the off chance that you are scrolling while the calculations take place you could throw off the offset, as getBoundingClientRect() only takes into account the distance from the edge of your view to the element, while the scrollY shows the distance from the edge of your view to the top of the document.

answered Jul 30, 2018 at 12:43

codeWonderland

4072 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LegenJerry Over a year ago

$(element[0]).offset().top to OP if you are ever going to use jquery library. But this is the correct solution in vanilla js

Collectives™ on Stack Overflow

Getting element position from the top of scrolled container div in Angularjs directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related