【发布时间】：2018-11-09 07:58:41
【问题描述】：
我正在玩耍并练习我的 JS（初学者）。我已经创建了堆叠面板，但我撞到了墙上。我只是不能针对移动元素添加阴影类（只有当一个面板在另一个面板上方时，才应该添加类）。 现在我有这个：
const boxes = Array.from(document.querySelectorAll(".box"));
const wrapper = document.querySelector(".wrapper");
const leftMargin = 60; //px
function scrollWrap(e) {
let scrollCoord = wrapper.scrollLeft; // horizontal scroll value
boxes.forEach((box, index) => {
let leftMarginStop = index * leftMargin;
const boxCoord = box.getBoundingClientRect();
let leftCoordPanel = boxCoord.left;
let flag = false;
//console.log({scrollCoord, leftMarginStop, leftCoordPanel, box});
if (boxCoord.left <= leftMarginStop) { // if left side of pannel is less than margin 60, 120, 180,...
//console.log("STAHP!!");
box.style.position = "sticky";
box.style.left = `${leftMarginStop}px`; // sets the left to 60, 120, 180,...
flag = true;
if (flag) {
box.classList.add("shadow");
console.log(this) //how to target each panel rather than wrapper?
} else {
box.classList.remove("shadow");
}
} else {
box.style.position = "static";
box.style.left = 0;
flag = false;
}
});
}
wrapper.addEventListener("scroll", scrollWrap);body {
margin: 0;
padding: 0;
}
.wrapper, .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
position: sticky;
height: 750px;
z-index: 1;
}
.wrapper {
width: 1442px;
border-right: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
display: flex;
overflow: scroll;
}
.wrapper .box1 {
min-width: 357px;
height: 750px;
background-color: #1a1a1a;
}
.wrapper .box2 {
min-width: 357px;
height: 750px;
background-color: #333;
}
.wrapper .box3 {
min-width: 702px;
height: 750px;
background-color: #4d4d4d;
}
.wrapper .box4 {
min-width: 630px;
height: 750px;
background-color: #666;
}
.wrapper .box5 {
min-width: 630px;
height: 750px;
background-color: #808080;
}
.wrapper .box6 {
min-width: 357px;
height: 750px;
background-color: #999;
}
.wrapper .box7 {
min-width: 630px;
height: 750px;
background-color: #b3b3b3;
}
.wrapper .box8 {
min-width: 630px;
height: 750px;
background-color: #ccc;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 0.2);
}<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
</div>如果有人可以帮助我，请向我展示带有解释的代码，这样我就可以看到并知道什么和如何。 我尝试使用或不使用某些标志来执行此操作，但是每次在元素到达末尾（左填充）时添加类。当元素位于其他元素之上时，我想添加类。如果不是，请删除类。另外，如何使它在鼠标滚轮上工作？我正在用苹果魔术鼠标对此进行测试，但在滚轮上它不起作用。 哦，拜托，如果您发现有什么非常不对的地方，请告诉我，我是初学者，想从这篇文章中学到一些东西。
【问题讨论】：
-
绕过过滤器并不是最好的事情......在问题中发布代码。使用允许您拥有与 jsfiddle 中相同的功能的 snipplet。 i.stack.imgur.com/522IS.png
-
另外，它的“哦”，而不是“哦”！ :)
-
完成 ;)。谢谢，我没看到。
标签： javascript css panel