javascript - 图像 slider - 如何检查元素是否部分超出父 div 水平

Question

我试图找出一种更好的方法来滚动向左和向右最远的图像，如果它们在单击时部分超出父 div。
有谁知道我如何更好地检测它们何时通过 JS 部分消失？
如果有更好的方法可以将可用图像滑入 View ？
试图获得一种不依赖于视口(viewport)宽度的合适方法以适用于所有设备屏幕。

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>

Answer 1

让 parent 离开

获取父宽度

获取目标左侧

获取目标宽度

 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 ")
 }

获取元素偏移量和宽度和高度:

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

有时，如果您愿意，可以使用 jQuery 之一:(对于顶部和左侧)

        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
        };

对于高度和宽度，您可以使用 Element.getBoundingClientRect().width/height || Element.offsetWidth/offsetHeight

this is up to you to use offset or getBounding