Question

我是Keith Clark的纯CSS视差技术的忠实拥护者，并且一直在我自己的网站上成功使用了它。但是，最近，我注意到背景视差元素even in his own demo不与屏幕左侧邻接，而是留有间隙，间隙的大小取决于它们在3D空间中渲染的距离。

据我所知，罪魁祸首是滚动条。该滚动条应该在那里（在父视差div内），但是它会在父容器的大小（呈现3d空间）与容器的大小之间产生差异。视差儿童，为该间隙留出空间。我在最新版本的Chrome，Firefox和Safari中看到了它（尽管我发誓我甚至一年前都没有看到它）。

可以通过对每个视差组或视层应用width: 100vw规则来解决此问题。但是，尽管这消除了差距，但它使元素与视图的默认中心不对齐（因此，对没有应用100vw规则的任何元素也是如此）。我还希望有一个尽可能符合“纯CSS”原则的解决方案。

摘自Keith Clark示例的HTML：

<div class="parallax">
  <div class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div>Base Layer</div>
    </div>
    <div class="parallax__layer parallax__layer--back">
      <div>Background Layer</div>
    </div>
  </div>
</div>

CSS：

.parallax { // parent, page-level container
    height: 500px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
    -webkit-perspective-origin-x: 100%;
    perspective-origin-x: 100%;
}

.parallax__group {
    position: relative;
    height: 500px;
    height: 100vh;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform-origin-x: 100%;
    transform-origin-x: 100%;
}

.parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
}

.parallax__layer--back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    z-index: 3;
}

Answer 1

我想出了一些解决方案，并将其放在以下示例网站中：https://dawaltconley.github.io/parallax-gap-fix/。

问题似乎仅与某些Mac系统滚动条有关，当用户插入USB鼠标（我如何找到它们）或在其设置中将Show scroll bars更改为Always时出现。与透明触控板不同，此滚动条更改了视差页面元素的内部宽度，但更改了用于呈现视差元素的3D空间的总大小。

将perspective-origin和transform-origin属性更改为left可以重新排列视差元素，而无需调整大小。这将是一个理想的解决方案，除了Safari似乎对计算3D空间的方式与大多数现代浏览器不同，并且需要将这些属性设置为center才能正确对齐所有内容。

我为所有浏览器找到的最佳解决方案是在.parallax__group元素中添加以下规则：

.parallax__group {
    margin-left: calc(100% - 100vw);
    margin-right: calc(100% - 100vw);
    padding-left: calc(100vw - 100%);
    padding-right: calc(100vw - 100%);
}

100vw元素的任何直接子元素与100%和.parallax之间的区别是滚动条的宽度。为该宽度设置负的右页边距会将视差元素扩展到与页面相同的宽度，从而消除屏幕边缘的间隙。将此设置为左边缘会使元素拉伸得比必要的多一点，但是需要使3D空间的中心与页面其余部分的中心对齐。

应该通过对.parallax__layout类应用类似的规则来弥补这种膨胀，但是Safari的不一致会导致此困难，因为非膨胀元素将需要完美对齐以避免布局上的空白。

顺便说一句，此解决方案的优点是，当有问题的滚动条不存在时，它不执行任何操作。在这种情况下，100vw和100%之间没有区别，因此计算出的样式与Kieth Clark的样式相同。

CSS视差滚动站点中滚动条创建的间隙

1 个答案: