使用滚动从 div 内部展开 div 全屏

Question

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

我正在尝试不同的选项，但无法获得结果。

这里的小提琴

实际上，我正在尝试隐藏其他节点并删除溢出，但无法全屏展开节点。我应该使用绝对定位，但这样我就无法在水平滚动条中定位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.open 的选择器更改 CSS 中的代码

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