Javascript 有没有办法检测HTML中屏幕上显示的元素
我基本上想要的是，当div位于查看器的视口中时（使用JS、CSS或任何其他方式），更改其z-index（其他CSS属性，例如：Color）Javascript 有没有办法检测HTML中屏幕上显示的元素,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我基本上想要的是，当div位于查看器的视口中时（使用JS、CSS或任何其他方式），更改其z-index（其他CSS属性，例如：Color） 你好 您在此 拜伊 有没有一种方法可以在不计算元素位置的情况下实现这一点？IntersectionObserver将告诉您元素是否在视图中 下面是一个基于问题代码的非常简单的示例。当一个元素进入/离开视图时，它将“I am in/out view”作为其内部HTML。显然，无论你想要什么样的重新排序，都要改变它 let callback=（条目，观察者
你好
您在此
拜伊
有没有一种方法可以在不计算元素位置的情况下实现这一点？IntersectionObserver将告诉您元素是否在视图中 下面是一个基于问题代码的非常简单的示例。当一个元素进入/离开视图时，它将“I am in/out view”作为其内部HTML。显然，无论你想要什么样的重新排序，都要改变它
let callback=（条目，观察者）=>{
entries.forEach（entry=>{
//来自MDN：
//每个条目描述了一个观察到的交叉点的变化
//目标要素：
//entry.boundingClientRect
//入口.交叉比
//entry.intersectionRect
//entry.isIntersecting
//entry.rootBounds
//进入目标
//进场时间
entry.target.innerHTML=entry.isIntersecting？“我在视图中！”：“我不在视图中”；
//当div离开或进入视口时，执行您想执行的任何操作
});
};
const divs=document.queryselectoral（'div'）；
const observer=新的IntersectionObserver（回调）；
div.forEach（div=>{
观察员观察（div）；
});
div{
高度：100vh；
}
分区：第n个孩子（1）{
背景：线性梯度（红色、蓝色）；
}
分区：第n个孩子（2）{
背景：线性梯度（石灰、青色）；
}
分区：第n个孩子（3）{
背景：线性梯度（橙色、紫色）；
}
你好
您在此
拜伊
检查这个答案：注意z-index
只影响“定位”元素。没有非静态位置的普通
元素不会受到影响。要在元素进入或离开视口时得到通知，可以使用intersectionObserver。@a Haworth:谢谢
<HTML>
<head>
</head>
<body>
<!--Something Here-->
<div>Hello</div> <!--Initialy this is what is in the Viewport -->
<div>You Are Here</div> <!--When this comes in to the Viewport z-index of this change to higher value-->
<div>Bye</div> <!--when in to the Viewport z-index of this change to higher value-->
<!--Something Here-->
</body>
<HTML>