CSS 视差滚动网站中的滚动条造成的间隙

Question

我是 Keith Clark 纯粹的 CSS 视差技术的忠实粉丝，并且已经在我自己的一个网站上使用它并取得了一些成功。然而最近，我注意到背景视差元素 even in his own demo 并没有紧靠屏幕的左侧，而是留下了一个间隙，间隙的大小取决于 3D 中的距离 space它们被渲染。

据我所知，罪魁祸首是滚动条。这个滚动条应该在那里（在父视差 div 内），但它在父容器的大小（其中 3d space 被渲染）和容器的视差子项的大小，这为该间隙留出了空间。我在 Chrome、Firefox 和 Safari 的最新版本中看到了它（尽管我可以发誓一年前我没有在那里看到它）。

这可以通过对每个视差组或层应用 width: 100vw 规则来解决。但是，虽然这消除了差距，但它使元素与视图的默认中心不对齐（因此任何没有应用 100vw 规则的元素）。我也想要一个尽可能遵守 'pure CSS' 原则的解决方案。

HTML 取自 Keith Clark 的例子：

<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/。

问题似乎只出现在某些系统滚动条上，当用户插入 USB 鼠标（我是如何找到它们的）或将 Show scroll bars 更改为 [=12= 时，这些滚动条出现在 OSX 上] 在他们的设置中。与透明触控板不同，此滚动条会更改视差页面元素的内部宽度，但不会更改总大小，其中呈现视差元素的 3D space。

将 perspective-origin 和 transform-origin 属性更改为 left 可重新对齐视差元素而不调整任何大小。这将是理想的解决方案，除了 Safari 似乎计算 3D space 与大多数现代浏览器不同，并且需要将这些属性设置为 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 的中心 space 与页面其余部分的中心对齐。

应该可以通过对 .parallax__layout class 应用类似的规则来抵消这种膨胀，但是 Safari 的不一致性使这变得困难，因为非膨胀的元素需要对齐完美避免布局中的间隙。

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

CSS 视差滚动网站中的滚动条造成的间隙

Gap created by scrollbar in CSS parallax scrolling sites

html

css

scrollbar

parallax

pure-css