时间戳

首页 > 解决方案 > 为什么带有溢出隐藏的 translateZ 会导致向右轻微移动？

html - 为什么带有溢出隐藏的 translateZ 会导致向右轻微移动？

问题描述

我试图使用基于Google 的 Performant Parallaxing 的纯 CSS 创建视差效果。这涉及使用perspective、translateZ和scale。它还涉及使用大量堆叠在一起的 PNG 图像“层”。但是，这些层存在问题。

在此示例中，仅显示了 PNG 图像的一层，因为它足以显示问题。这是问题的图像（div 左侧的空白区域）。

问题

问题出现在以下情况： 的垂直滚动条body可见，水平滚动条body因溢出而隐藏，视差图像设置为100%的宽度。奇怪的是，这个问题可以简单地通过将图像的宽度设置为 100vw而不是 100% 来解决。这是显示问题的代码。

html, body {
  margin: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

body {
  perspective: 100px;
}

.background {
  width: 100%;
  height: 101vh;
  background: url('https://i.pinimg.com/originals/13/17/ba/1317ba3fb0901d7b6be59f9c21d39d12.jpg');
  transform: translateZ(-300px) scale(4);
}
<div class="background"></div>

为什么当宽度为 100% 而不是 100vw 时图像上会出现空白间隙？

标签： htmlcsscss-transformsparallaxperspective

解决方案

100% 尊重内部窗口的宽度减去滚动条（对我来说计算宽度为 1903px），而 100vw 尊重整个视口的宽度，而不考虑滚动条（对我来说计算宽度为 1920px）。

100vw 在这里“起作用”的原因是因为图像比它的对应图像大 17px。它也适用于 100% 宽度和任何低于 100vh 的高度，因为滚动条消失并且 100% 等于 100vh。

当您添加带有负值的 translateZ 时，您正在翻译的元素在视觉上会变小，因此您看到的差距就是其中的产物。如果您希望图像填满屏幕，请在变换中使用较小的值，或者在比例或宽度中使用较大的值。

推荐阅读