TransWikia.com

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

Stack Overflow Asked on November 29, 2021

I’m trying to figure out a better way to scroll the images that are farthest to the left and right into view if they are partially out of the parent div when they are clicked.

Would anyone know how I can better detect when they are partially out of view via JS?

If there a better way to go about sliding the available images into view?

Trying to get a suitable method that is not viewport width dependant to work for all the device screens.

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>

One Answer

  1. get parent left
  2. get parent width
  3. get target left
  4. get target width
 const x = parent.width + parent.left - (target.width + target.left)

 if(x > 0) {
  console.log("passed");
 } else if(x == 0) {
  console.log("on line");
 } else if( x < 0 ) {
  console.log(" no ")
 }

getting Element offset and width and height:

  • Element.offsetLeft || Element.getBoundingClientRect().x

sometimes one of these works if you want you can use jQuery one: ( for top and left )

        if ( !elem.getClientRects().length ) {
            return { top: 0, left: 0 };
        }

        // Get document-relative position by adding viewport scroll to viewport-relative gBCR
        rect = elem.getBoundingClientRect();
        win = elem.ownerDocument.defaultView;
        return {
            top: rect.top + win.pageYOffset,
            left: rect.left + win.pageXOffset
        };
  • for height and width you can use Element.getBoundingClientRect().width/height || Element.offsetWidth/offsetHeight

this is up to you to use offset or getBounding

Answered by M.M.F on November 29, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP