Question

在这种例子中,如果这一内容相互交织,我如何从 j中知道?

如果例如：bottom:0px; 不应该相交

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

<div class="fixed"></div>

Answer 1

我从这个网站(tutorial ,其中守则检查看该要素是否在参考。

代码通过使用getBoundingClientRect()检查元素的位置，与documentElement.clientHeight检查视口的高度进行比较来工作。

就你而言,由于你只想检查底边的边界重叠,我修改了该守则,只检查了<代码>domRect.bottom。

最后,这一方法将显示:bottom:0px;作为交叉,和bottom: 1px;为非交叉。如果您希望bottom:0px; to intersection, Add.1 to documentElement.clientH8

function isInterectingBottom(ele) {
    const domRect = ele.getBoundingClientRect();
    console.log(domRect.bottom);
    console.log(document.documentElement.clientHeight);
    return (
      domRect.bottom >= document.documentElement.clientHeight + 1
    );
  }
  
  const ele = document.querySelector( .fixed );
  console.log(isInterectingBottom(ele));

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

<div class="fixed"></div>

Answer 2

您可使用getBoundingClientRect(功能。它提供了有关一个要素的规模及其相对于

然后通过将其与window.innerHeight进行比较，您可以判断它是否与屏幕相交。

var elmBottom = document.querySelector(".fixed").getBoundingClientRect().bottom;

if(elmBottom > window.innerHeight) console.log("elm intersects the bottom");
else console.log("elm still fully in view");

.fixed{
  position:fixed;
  bottom:-10px;
  left:0px;
  width:300px;
  height:300px;
  background:blue;
  border:3px solid red;
}

<div class="fixed"></div>

友情链接