图像滑块 - 如何检查元素是不是部分超出父 div 水平

Posted 2023-03-06

【中文标题】图像滑块 - 如何检查元素是不是部分超出父 div 水平

【英文标题】：Image slider - How to check if element is partially out of parent div Horizontally图像滑块 - 如何检查元素是否部分超出父 div 水平

【发布时间】：2020-11-12 03:57:55

【问题描述】：

我正在尝试找出一种更好的方法来滚动向左和向右最远的图像，如果它们在被单击时部分超出父 div。

有谁知道我如何通过 JS 更好地检测它们何时部分不在视野范围内？

是否有更好的方法可以将可用图像滑动到视图中？

试图获得一种不依赖于视口宽度的合适方法，以适用于所有设备屏幕。

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>

【参考方案1】：

让父母离开 获取父级宽度 向左移动目标 获取目标宽度

 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

这取决于你是否使用 offset 或 getBounding

【讨论】：

通过“element.getBoundingClientRect().left”获取左边？如果是这样，我试过了，但它没有按预期工作。可能是因为“target.getBoundingClientRect”考虑了设备的视口而不是容器

偏移量：el.offsetLeft、el.offsetWidth、el.offsetHeight、el.offsetTop

或使用 jQuery: $(el).offset().left