jquery 检查子元素在隐藏溢出的父div中是否100%可见

d8tt03nd 于 2023-01-08 发布在 jQuery

关注(0)|答案(2)|浏览(186)

你好，
我有一个动态轮播，我想检查第一张幻灯片和最后一张幻灯片是否对用户100%可见，然后需要触发一个函数，目前我使用getBoundingClientRect（），但它使用视口而不是父div。父div不是全宽，而是视口的80%
这是我检查第一张幻灯片的代码，它使用viewport：
JavaScript语言：

function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}

    const box = document.querySelector('.firstSlide');
    const message = document.querySelector('#inView');

    console.log(box);
    document.addEventListener('click', function () {
        const messageText = isInViewport(box) ?
            'Yess its in view' :
            'Yess its not in view';

        message.textContent = messageText;

    }, {
        passive: true
    });

超文本：

<div class="carousel" style="grid-template-columns: repeat(5, 585px); overfow:hidden, width:80%; margin:auto">
                <div class="image-container"><img src="image/url" alt=""></div>
                <div class="image-container"><img src="image/url" alt=""></div>
                <div class="image-container"><img src="image/url" alt=""></div>
                <div class="image-container"><img src="image/url" alt=""></div>
                <div class="image-container firstSlide"><img src="image/url" alt=""></div>
            </div>
<p id="inView">Yess its in view</p>

是否有一种方法可以检查子元素是否100%处于父元素视图中，而不是整个视图中？

jquery

来源：https://stackoverflow.com/questions/75002332/check-if-child-element-is-100-visible-inside-a-parent-div-that-has-overflow-hid

2条答案

按热度按时间

jm2pwxwz1#

有两种方法可以解决这个问题。
1.如果你想使用getBoundingClientRect，你可以得到父元素的边界框，计算这个框在视图中的位置，然后不是比较幻灯片与视图框的位置，而是将它与父元素的边界框进行比较。
1.**（最佳实践）**新的花哨方法。使用交集观察器API，该API可用于检查元素是否在视口中，但也可直接用于查看元素与祖先元素的比较位置。新API也由浏览器运行，不会阻塞主线程，这对性能非常有利。
以下是交叉点观察器API的链接：https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

赞(0）回复(0）举报 2023-01-08

ubof19bj2#

下面的代码可以确定一个边框工作区矩形是否完全位于另一个边框工作区矩形内部。

const d1 = document.getElementById('d1');
const d2 = document.getElementById('d2');

const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');

const r1 = document.getElementById('r1');
const r2 = document.getElementById('r2');

function isPVisible(element, container)
{
  const elRect = element.getBoundingClientRect();
  const conRect = container.getBoundingClientRect();
  
  let result = false;
  
  if(elRect.x >= conRect.x && elRect.y >= conRect.y
  && elRect.x + elRect.width <= conRect.x + conRect.width 
  && elRect.y + elRect.height <= conRect.y + conRect.height)
  {
    result = true
  }
  
  return result;
}

console.log(isPVisible(p1, d1));
console.log(isPVisible(p2, d2));

#d1
{
width: 40px;
height: 10px;
overflow: hidden;
border: 1px blue solid;
}
#p1
{
width: 50px;
height: 30px;
border: 1px red solid;
}

#d2
{
width: 90px;
height: 50px;
overflow: hidden;
border: 1px blue solid;
}
#p2
{
width: 50px;
height: 30px;
border: 1px red solid;
}

<div id="d1">
<p id="p1">hello</p>
</div>

<div id="d2">
<p id="p2">hello</p>
</div>

<p>
<span id="r1"></span>
<span id="r2"></span>
</p>

赞(0）回复(0）举报 2023-01-08

我来回答

jquery 检查子元素在隐藏溢出的父div中是否100%可见

2条答案

相关问题

热门标签

最新问答