Javascript 如何使用“添加或删除td/th中的阴影？”；位置：粘性“；在卷轴上？

我用

position:sticky

制作了一个带有标题和最后一列的表格。当滚动条水平位于末尾时，我想从最后一列中删除阴影，当滚动条垂直位于开头时，我想从标题中删除阴影。但在本例中，表仅在固定列中有阴影，而不在标题中

尽管出于性能原因，我不希望使用Scroll Event Listener解决方案（请参阅），但如果有人以这种方式解决问题，他们可以将其共享以供参考并帮助其他人

该守则亦可于

main{
显示器：flex；
最大高度：20雷姆；
溢出：自动；
}
桌子{
边界间距：0；
}
th{
文本对齐：左对齐；
}
th，
运输署{
边框底部：1px实心#C6；
身高：5雷姆；
空白：nowrap；
右：2rem；
}
.固定{
背景色：白色；
位置：粘性；
}
.固定顶{
盒影：4px3px5px0pxRGBA（0,0,0,0.2）；
排名：0；
z指数：1；
}
.固定权利{
左边框：1px实心#C6；
盒影：-5px0px5px0pxRGBA（0,0,0,0.2）；
左：1rem；
右：0；
z指数：1；
}
.固定顶，固定右{
盒影：4px3px5px0pxRGBA（0,0,0,0.2），-5px0px5px0pxRGBA（0,0,0,0.2）；
z指数：2；
}

动物
年龄
国家
判决
颜色
程序设计语言
貂皮
15岁
日本
Lorem ipsum dolor sit amet，是一位杰出的献身者。
紫色
科特林
托科巨嘴鸟
35岁
巴西
这是一个很好的例子。
橙色
敏捷的
公牛
42岁
西班牙
多奈克·维塔里苏斯·乌纳。
红色
JavaScript
棕熊
17岁
俄罗斯
妊娠期和妊娠期。
绿色
python

首先，您需要一个CSS类，该类将从

td

和

th

元素中移除阴影

.noShadow {
  box-shadow: none !important;
}

现在，有两种方法可以通过javscript实现这一点：

滚动事件

交叉点观察者API

如何通过交点观察者API实现这一点？ 您需要通过两个

InterSectionObserver

实例观察2个

td

元素，一个实例观察一个

td

元素，并执行代码，当观察到的

td

元素进入视图时，该代码将从表行或列中删除或添加

noShadow

CSS类

我在一个

td

元素上添加了

observed column

类，该元素将用于添加或删除最后一列中的阴影，并在其中一个

td

元素上添加了

observed row

类，以添加或删除标题中的阴影

下面是您需要的javascript代码

const lastColumn = document.querySelectorAll(".fixed-right");
const header = document.querySelectorAll(".fixed-top");
const tableContainer = document.querySelector("main");
let rowHasShadow = false;
let columnHasShadow = true;

const options = {
  root: tableContainer,
  rootMargin: "0px",
  threshold: 1
};

const rowObserver = new IntersectionObserver((entries, observer) => {
  if (entries[0].isIntersecting) {
    // '.observed-row' element is in view, remove shadow from header
    rowHasShadow = false;
    header.forEach(th => {
      if (th.classList.contains('fixed-header') && !columnHasShadow) {
        th.classList.add("noShadow")
      } else if (!th.classList.contains('fixed-header')) {
        th.classList.add("noShadow")
      }
    });
  }
  else {
    // '.observed-row' element is not in view, add shadow to header
    rowHasShadow = true;
    header.forEach(th => th.classList.remove("noShadow"));
  }
}, options);

rowObserver.observe(document.querySelector(".observed-row"));

const columnObserver = new IntersectionObserver((entries, observer) => {
  if (entries[0].isIntersecting) {
    // '.observed-column' element is in view, remove shadow from last column
    columnHasShadow = false;
    lastColumn.forEach(th => {
      if (th.classList.contains('fixed-header') && !rowHasShadow) {
        th.classList.add("noShadow");
      } else if (!th.classList.contains('fixed-header')) {
        th.classList.add("noShadow");
      }
    });
  }
  else {
    // '.observed-column' element is not in view, add shadow to last column
    columnHasShadow = true;
    lastColumn.forEach(th => th.classList.remove("noShadow"));
  }
}, options);

columnObserver.observe(document.querySelector(".observed-column"));

演示

const lastColumn=document.queryselectoral（“.fixed right”）；
const header=document.queryselectoral（“.fixed top”）；
const tableContainer=document.querySelector（“main”）；
让RowHassadow=false；
让ColumnHassadow=true；
常量选项={
根目录：tableContainer，
rootMargin:“0px”，
阈值：1
};
const rowObserver=新的IntersectionObserver（（条目，观察者）=>{
if（条目[0]。isIntersecting）{
//“.observed row”元素在视图中，请从标题中删除阴影
RowHassadow=假；
header.forEach（th=>{
if（th.classList.contains（'fixed-header'）&&！columnhashadow）{
th.classList.add（“noShadow”）
}如果（！th.classList.contains（'fixed-header'），则为else{
th.classList.add（“noShadow”）
}
});
}
否则{
//“.observed row”元素不在视图中，请将阴影添加到标题
RowHassadow=true；
header.forEach（th=>th.classList.remove（“noShadow”）；
}
}，选项）；
观察（document.querySelector（“.observed row”）；
const columnObserver=新的IntersectionObserver（（条目，观察者）=>{
if（条目[0]。isIntersecting）{
//“.observed column”元素在视图中，请从最后一列中移除阴影
ColumnHassadow=false；
lastColumn.forEach（th=>{
if（th.classList.contains（'fixed-header'）&&&！rowhashadow）{
添加（“noShadow”）；
}如果（！th.classList.contains（'fixed-header'），则为else{
添加（“noShadow”）；
}
});
}
否则{
//“.observed column”元素不在视图中，请将阴影添加到最后一列
ColumnHassadow=true；
forEach（th=>th.classList.remove（“noShadow”）；
}
}，选项）；
columnObserver.observe（document.querySelector（“.observed column”）
main{
显示器：flex；
最大高度：20雷姆；
溢出：自动；
}
桌子{
边界间距：0；
}
th{
文本对齐：左对齐；
}
th，
运输署{
边框底部：1px实心#C6；
身高：5雷姆；
空白：nowrap；
右：2rem；
}
.固定{
背景色：白色；
位置：粘性；
}
.固定顶{
盒影：4px3px5px0pxRGBA（0,0,0,0.2）；
排名：0；
z指数：2；
}
.固定权利{
左边框：1px实心#C6；
盒影：-5px0px5px0pxRGBA（0,0,0,0.2）；
左：1rem；
右：0；
z指数：1；
}
.固定顶，固定右{
长方体阴影：4px 3px 5px 0px rgba（0,0,0,0.2），
-5px0px5px0pxrgba（0,0,0,0.2）；
z指数：2；
}
noShadow先生{
盒影：无！重要；
}

动物
年龄
国家
判决
颜色
程序设计语言
貂皮
15岁
日本
Lorem ipsum dolor sit amet，是一位杰出的献身者。
紫色
科特林
托科巨嘴鸟
35岁
巴西
这是一个很好的例子。
橙色
敏捷的
公牛
42岁
西班牙
多奈克维塔酒店