如何解决浏览器如何测量使用透视的元素的滚动宽度？
我创建了一个准系统 HTML 页面来说明视差滚动（请参阅下面的代码段或此 jsfiddle）。当 <main> 元素完全向右滚动时，Chrome、Opera 和 Microsoft Edge（一方面）和 Firefox（另一方面）中的结果不同。
在 Firefox 中，当最右子元素的最右端与父元素的右侧齐平时，滚动停止。在 Firefox 中的体验对我来说似乎合乎逻辑。
在其他浏览器中，滚动可能会超出这一点。
该演示在靠近查看器的元素上使用 transform: translateZ(35px)，但如果您在非 Firefox 浏览器中使用不同的 translateZ 值进行测试，您将看到滚动停止在不同的位置。
如果您能帮助我了解非 Firefox 浏览器如何计算 scrollWidth 元素的 <main>，我将不胜感激。
body {
margin: 0;
background: #000;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
position: relative;
background: #888;
height:100%;
width: 100vh;
overflow-y: hidden;
overflow-x: auto;
perspective: 100px;
perspective-origin: 50% -10%;
}
div {
position: absolute;
left: 0;
height: 20vh;
width: 200vh;
bottom: 40%;
transform-origin: 0 100%;
background: linear-gradient(to right,#090 0%,#090 10%,#cfc 10%,#fcc 90%,#900 90%,#900 100%);
}
div:last-child {
transform: translateZ(35px)
}<main>
<div></div>
<div></div>
</main>编辑：以下是 Chrome 中显示的另外两个片段：
-
translateZ可能有一个截止值，在此之后翻译的子元素的宽度不再影响父元素的scrollWidth。 - 子级的截止值取决于父级
y的perspective-origin值。例如，对于perspective: 100px和perspective-origin: 50% 50%;，translateZ高于52.7px的值不再起作用。如果使用perspective-origin: 50% 5%;，translateZ的值必须大于73.3px才能生效。
jsfiddles：
演示 1：perspective-origin: 50% 50%;，在 52.6px 之后截止
body {
margin: 0;
background: #000;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
position: relative;
background: #111;
height:100%;
width: 100vh;
overflow-y: hidden;
overflow-x: auto;
perspective: 100px;
perspective-origin: 50% 50%;
}
div {
position: absolute;
height: 0.5vh;
bottom: 44%;
transform-origin: 0 100%;
}
div:nth-child(1) {
left: 0;
width: 200vh;
background-color: rgba(192,192,0.25);
}
div:nth-child(2) {
left: 5vh;
width: 180vh;
transform: translateZ(10px);
background-color: rgba(192,0.25);
}
div:nth-child(3) {
left: 10vh;
width: 162vh;
transform: translateZ(20px);
background-color: rgba(192,96,0.25);
}
div:nth-child(4) {
left: 15vh;
width: 144vh;
transform: translateZ(30px);
background-color: rgba(192,0.25);
}
div:nth-child(5) {
left: 20vh;
width: 128vh;
transform: translateZ(40px);
background-color: rgba(96,0.25);
}
div:nth-child(6) {
left: 25vh;
width: 112vh;
transform: translateZ(50px);
background-color: rgba(0,0.25);
}
div:nth-child(7) {
left: 26.4vh;
width: 108.6vh;
transform: translateZ(52.6px);
background-color: rgba(0,0.5);
}
/* THE SPLIT OCCURS AFTER 52.6 */
div:nth-child(8) {
left: 26.4vh;
width: 147.2vh;
transform: translateZ(52.7px);
background-color: rgba(0,0.5);
}
div:nth-child(9) {
left: 30vh;
width: 140vh;
transform: translateZ(60px);
background-color: rgba(0,0.25);
}
div:nth-child(10) {
left: 35vh;
width: 130vh;
transform: translateZ(70px);
background-color: rgba(0,0.25);
}
div:nth-child(11) {
left: 40vh;
width: 120vh;
transform: translateZ(80px);
background-color: rgba(96,0.25);
}
div:nth-child(12) {
left: 45vh;
width: 110vh;
transform: translateZ(90px);
background-color: rgba(192,0.25);
}<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- SPLIT AFTER 52.6px -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</main>演示 2：perspective-origin: 50% 5%;，在 73.2px 之后截止
body {
margin: 0;
background: #000;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
main {
position: relative;
background: #111;
height:100%;
width: 100vh;
overflow-y: hidden;
overflow-x: auto;
perspective: 100px;
perspective-origin: 50% 5%;
}
div {
position: absolute;
height: 0.5vh;
bottom: 87.5%;
transform-origin: 0 100%;
}
div:nth-child(1) {
left: 0;
width: 200vh;
background-color: rgba(192,0.25);
}
div:nth-child(7) {
left: 30vh;
width: 98vh;
transform: translateZ(60px);
background-color: rgba(0,0.5);
}
div:nth-child(8) {
left: 35vh;
width: 84vh;
transform: translateZ(70px);
background-color: rgba(0,0.5);
}
div:nth-child(9) {
left: 26.4vh;
width: 83vh;
transform: translateZ(73.2px);
background-color: rgba(0,0.25);
}
/* THE SPLIT OCCURS AFTER 73.2 */
div:nth-child(10) {
left: 26.4vh;
width: 137vh;
transform: translateZ(73.3px);
background-color: rgba(0,0.25);
}<main>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- SPLIT AFTER 73.2px -->
<div></div>
<div></div>
<div></div>
</main>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。