CSS视差滚动站点中滚动条创建的间隙 [英] Gap created by scrollbar in CSS parallax scrolling sites

问题描述

我是Keith Clark的纯CSS视差技术的忠实拥护者，并且已经在我自己的网站上成功使用了它.但是最近，我注意到背景视差元素

I'm a big fan of Keith Clark's pure CSS parallax technique and have been using it with some success on one of my own sites. Recently, however, I noticed that the background parallax elements, even in his own demo, do not abut the left side of the screen, but leave a gap, the size of which depends on how far back in the 3D space they are rendered.

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

The culprit, as far as I can tell, is the scrollbar. This scrollbar is supposed to be there (inside the parent parallax div), but it creates a difference between the size of the parent container (in which the 3d space is rendered) and the size of the containers' parallax children, which leaves room for that gap. I see it in the latest versions of Chrome, Firefox, and Safari (though I could have sworn I didn't see it there even a year ago).

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

This can be sort of fixed by applying a width: 100vw rule to each parallax group or layer. But while this clears the gap, it places the elements out of alignment with the default center of the view (and so with any elements that do not also have the 100vw rule applied to them). I would also like a solution that holds to the 'pure CSS' principle as much as possible.

摘自Keith Clark示例的HTML:

HTML taken from the Keith Clark example:

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

推荐答案

我想出了一些解决方案，并将它们放在示例网站中:

I came up with some solutions and put them into an example website here: https://dawaltconley.github.io/parallax-gap-fix/.

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

The problem only seems to arise with certain Mac system scrollbars, which appear when a user plugs in a USB mouse (how I found them) or changes Show scroll bars to Always in their settings. This scrollbar, unlike the transparent trackpad one, changes the inner width of the parallax page element, but not the total size, in which the 3D space for parallax elements is rendered.

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

Changing the perspective-origin and transform-origin properties to left realigns the parallax elements without resizing anything. This would be the ideal solution, except that Safari seems to calculate the 3D space differently than most modern browsers, and needs those properties set to center to align everything correctly.

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

The best solution I found for all browsers is to add the following rules to the .parallax__group element:

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

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

The difference between 100vw and 100%, from any immediate child of the .parallax element, is the width of the scrollbar. Setting a negative right margin to that width expands the parallax elements to the same width as the page, removing the gap at the edge of the screen. Setting this to the left margin stretches the elements a bit more than necessary, but is needed to align the center of the 3D space with that of the rest of the page.

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

It should be possible to offset this bloat by applying similar rules to the .parallax__layout class, but Safari's inconsistencies make this difficult, as a non-bloated element would need to be aligned perfectly to avoid gaps in the layout.

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

Incidentally, this solution has the advantage that it does nothing when the problematic scrollbars are absent. In that case, there is no difference between 100vw and 100%, so the computed style is identical to Kieth Clark's.

这篇关于CSS视差滚动站点中滚动条创建的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！