浏览器如何测量使用透视的元素的滚动宽度？

编程问答 2022-08-06

问题描述

我创建了一个准系统 HTML 页面来说明视差滚动（请参阅下面的代码段或此 jsfiddle）。当 <main> 元素完全向右滚动时，Chrome、Opera 和 Microsoft Edge（一方面）和 Firefox（另一方面）中的结果不同。

在 Firefox 中，当最右子元素的最右端与父元素的右侧齐平时，滚动停止。在 Firefox 中的体验对我来说似乎合乎逻辑。

在其他浏览器中，滚动可能会超出这一点。

该演示在靠近查看器的元素上使用 transform: translateZ(35px)，但如果您在非 Firefox 浏览器中使用不同的 translateZ 值进行测试，您将看到滚动停止在不同的位置。

如果您能帮助我了解非 Firefox 浏览器如何计算 scrollWidth 元素的 <main>，我将不胜感激。

comparison of Chrome and Firefox

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 (将#修改为@）

parallaxscroll