How to calculate how much of an element is off screen?

Question

I need something to calculate how much of the element is off screen—only in the top and bottom of it.

I'm using a snippet to see if the element is partially visible, so I just need to know how much of it is not visible.

I know it's something between the currenTop, element height and the size of what the user can see, but I think I'm missing something.

.position() method may come handy. It returns top and left position of an element. Bottom can be calculated adding the outerHeight of the element with position().top. — effone, Mar 24 '14 at 18:47

score 2 · Accepted Answer · edited May 23 '17 at 10:28

2

You should use the element.getBoundingClientRect() method and run calculations based on page position. The answer is detailed excellently in the question Retrieve the position (X,Y) of an HTML element.

edited May 23 '17 at 10:28

Community

answered Mar 24 '14 at 18:51

Steven Mann

Thanks!, this seems to be the way to go!. – SilverSurfer8484 Mar 24 '14 at 19:18

1 Answers1