Image slider - How to check if element is partially out of parent div Horizontally

const available_images_div = document.getElementById('available-images-div');

available_images_div.addEventListener('click', function(e) {

  if (e.target.nodeName == 'IMG') {

    const selected_image = e.target;

    document.getElementById('active-img').src = selected_image.src;

    let added_offset = selected_image.offsetLeft + selected_image.offsetWidth;
    let subtracted_offset = selected_image.offsetLeft - selected_image.offsetWidth;


    // Check if clicked image is partially or fully it's container's width on the right side
    if (added_offset > available_images_div.clientWidth) {

      // If the clicked image has an image to the right of it scroll that image into view
      if (selected_image.nextElementSibling) selected_image.nextElementSibling.scrollIntoView({
        behavior: "smooth"
      });

      // else scroll the clicked image into view
      else selected_image.scrollIntoView({
        behavior: "smooth"
      });
    }

    // Check if the container was scrolled and if the clicked image is the one furthest to the left of the containers view port
    if (available_images_div.scrollLeft > 0 && subtracted_offset < available_images_div.scrollLeft) {

      // If the clicked image has an image to the left of it scroll that image into view
      if (selected_image.previousElementSibling) selected_image.previousElementSibling.scrollIntoView({
        behavior: "smooth"
      });

      // else scroll the clicked image into view
      else selected_image.scrollIntoView({
        behavior: "smooth"
      });
    }
  }
});

#store-img-inner-div {
  width: 500px;
}

#store-img-inner-div img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 1px solid #ccc;
}

#available-images-div {
  display: flex;
  margin-top: 3rem;
  overflow-x: hidden;
  position: relative;
}

#available-images-div img {
  width: 20%;
  cursor: pointer;
}

#available-images-div img:not(:last-of-type) {
  margin-right: 10px;
}

<div id="store-img-inner-div">

  <div id="active-image-div">
    <img id="active-img" src="https://source.unsplash.com/U2BI3GMnSSE/1600x900">
  </div>

  <div id="available-images-div">
    <img src="https://source.unsplash.com/U2BI3GMnSSE/1600x900">

    <img src="https://source.unsplash.com/wawEfYdpkag/1600x900">

    <img src="https://source.unsplash.com/rRiAzFkJPMo/1600x900">

    <img src="https://source.unsplash.com/rSpMla5RItA/1600x900">

    <img src="https://source.unsplash.com/bIZJRVBLfOM/1600x900">

    <img src="https://source.unsplash.com/jM8HUcJtXB0/1600x900">

  </div>

</div>