Calculate what portion of div is off the screen

Question

I have a div that is position: absolute. Sometimes on smaller screen resolutions it goes off the screen. Is it possible to calculate in px how much of it is off the screen?

Answer 1

As has been already mentioned, this really isn't the way for solving this problem, however the code you need is:

const offsetRight = document.querySelector('.your-element').getBoundingClientRect().right - window.innerWidth

This code gets the px value of the right edge of your element and calculates the difference between that and the edge of the window.

For the left side:

const offsetLeft = 0 - document.querySelector('.your-element').getBoundingClientRect().left;