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

【问题标题】：Gap created by scrollbar in CSS parallax scrolling sitesCSS视差滚动站点中滚动条创建的间隙
【发布时间】：2018-12-14 13:48:57
【问题描述】：

我是 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;
}

【问题讨论】：

标签： html css scrollbar parallax pure-css

【解决方案1】：

我想出了一些解决方案并将它们放入示例网站：https://dawaltconley.github.io/parallax-gap-fix/。

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

【讨论】：