通过滚动从div内部全屏扩展div

Question

我正在尝试创建一个“复杂”动画，其中单击时轮播中的div（在X轴上滚动的简单父级）的div扩展到全屏。

我正在尝试其他选项，但无法获得结果。

Here the fiddle

实际上，我试图隐藏其他节点并消除溢出，但是无法在全屏模式下展开该节点。我应该使用绝对定位，但是那样就无法在水平滚动条中定位div。

document.querySelectorAll(".project").forEach(function(n) {
n.onclick = e => {
console.log("deee", e.clientY, e.clientX);

document.querySelector(".carousel").style.overflowX = "visible";

e.currentTarget.classList.add("opened");
document.querySelectorAll(".project:not(.opened)").forEach(n => {
  n.style.display = "none";
});
return;

}; }）;

有人能指出我正确的方向吗？

Answer 1

尝试使用.project。选择器打开CSS更改代码

.project.opened {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}