css - 为什么 CSS 视差效果需要 overflow-y?
问题描述
我创建了一个准系统视差演示。这很好用,你可以看到如果你运行下面的代码片段。但是,如果我删除以下 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,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, 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>
基本上,具有透视的元素需要滚动其内容才能看到效果。
推荐阅读
- php - 如何使用 usort 函数比较数组中的值?
- c++ - 为什么这段代码会导致 Windows Defender 发疯,并将这段代码识别为名为 Ludicrouz.j 的木马
- http - 如何将 cookie 用于 HTML 和 API 调用具有不同域的站点?
- azure-devops - 用于部署的 yaml 管道中的条件
- c# - 是否可以在不分配返回类型的情况下调用函数
- css - React-Native 下拉自动完成对齐
- python - OpenCV VideoWriter 产生“找不到起始编号”错误
- python-3.x - Web Scraping 给出错误/空输出
- reactjs - React-Router-Dom v5 在首页加载时抛出 404
- ios - 如何包装水平 UIScrollView 使其适用于 SwiftUI