时间戳

首页 > 解决方案 > CSS视差滚动站点中滚动条创建的间隙

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

问题描述

我是 Keith Clark 的纯 CSS 视差技术的忠实粉丝，并且在我自己的一个网站上使用它并取得了一些成功。然而，最近我注意到，即使在他自己的演示中，背景视差元素也不会紧靠屏幕左侧，而是留有间隙，其大小取决于它们在 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;
}

标签： htmlcssscrollbarparallaxpure-css

解决方案

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

问题似乎只出现在某些系统滚动条上，当用户插入 USB 鼠标（我如何找到它们）或更改其设置时，这些滚动条会出现在 OSXShow 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 的相同。

推荐阅读