问题描述
我创建了一个准系统视差演示。这很好用,你可以看到如果你运行下面的代码片段。但是,如果我删除以下 CSS 规则,它将停止工作:
main {
overflow-y: auto;
}
当不需要垂直滚动时,为什么需要为垂直滚动条包含规则?
body {
margin: 0;
}
main {
width:100vw;
height:100vh;
perspective: 2px;
/* overflow-y MUST be set to a certain value for parallax to work
* WORKS:
* + auto
* + hidden
* + overlay
* + scroll
* FAILS:
* - clip
* - inherit
* - initial
* - revert
* - unset
* - visible
*/
overflow-y: auto;
}
div {
position: absolute;
top: 0;
width: 99vw;
height: 100%;
}
div:nth-child(1) {
left: 0;
background-color: #900;
}
div:nth-child(2) {
left: 49.5vw;
background: rgba(0,192,0.5);
height: 80%;
top: 10%;
transform: translateZ(1px) scale(0.5);
z-index: 1;
}
div:nth-child(3) {
left: 99vw;
background-color: #009;
}
<body>
<main>
<div></div
><div></div
><div></div>
</main>
</body>
解决方法
当不需要垂直滚动时,为什么需要为垂直滚动条包含规则?
您需要垂直滚动,但您需要滚动 main
而不是屏幕。这里有一个小陷阱,因为删除 main
的滚动将使屏幕的默认滚动出现,您认为两者相同但不相同。我们需要滚动主视图,因为透视图是在那里定义的。
稍微减少宽度/高度,你会更好地理解。现在,如果您删除/添加溢出,您会发现它有所不同
body {
margin: 0;
}
main {
width: 90vw;
height: 90vh;
perspective: 2px;
overflow-y: auto;
}
div {
position: absolute;
top: 0;
width: 99vw;
height: 100%;
}
div:nth-child(1) {
left: 0;
background-color: #900;
}
div:nth-child(2) {
left: 49.5vw;
background: rgba(0,192,0.5);
height: 80%;
top: 10%;
transform: translateZ(1px) scale(0.5);
z-index: 1;
}
div:nth-child(3) {
left: 99vw;
background-color: #009;
}
<main>
<div></div>
<div></div>
<div></div>
</main>
基本上,具有透视图的元素需要滚动其内容才能看到效果。