纯 CSS 视差内部滚动条问题答案

【问题标题】：Pure CSS Parallax Inner Scrollbar Issue纯 CSS 视差内部滚动条问题
【发布时间】：2021-08-05 06:16:56
【问题描述】：

和很多人一样，我看到了 Keith Clark 的视差的纯 css 实现 (Keith Clark's Tutorial) 并且非常喜欢它。

在尝试实现它时，我在溢出的垂直视差内容（不是预期的）周围得到一个内部垂直滚动条，以及与延伸到屏幕垂直溢出之外的静态内容有关的外部垂直滚动条（预期)。我只想要一个控制整个页面的垂直滚动条（视差组加上静态内容）。当使用它向上/向下滚动时，可以在视差组中看到视差效果以及将静态内容移入和移出视图。

我需要进行哪些更改？

.parallax_group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

.parallax {
    perspective: 1px;
    perspective-origin-x: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

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

    font-size: 200%;

}

.parallax_layer--base {
    transform: translateZ(0) scale(1);
    background-color: red;
}

.parallax_layer--back {
    transform: translateZ(-1px) scale(2);
    background-color: blue;
}

.parallax_layer--deep {
    transform: translateZ(-2px) scale(3);
    background-color: green;
}

.static_content {
  height: 300px;
  background-color: black;
}

<div class="parallax">
  <div class="parallax_group">
    <div class="parallax_layer parallax_layer--back">
      <p>Back Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--base">
      <p>Base Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--deep">
      <p>Deep Layer</p>
    </div>
  </div>

</div>

<div class="static_content">

</div>

【问题讨论】：

标签： html css scroll

【解决方案1】：

.parallax_group {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;
}

.parallax {
    perspective:3px;
    perspective-origin-x: 100%;
    height: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    
}

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

    font-size: 200%;

}

.parallax_layer--base {
    transform: translateZ(0) scale(1);
    background-color: red;
}

.parallax_layer--back {
    transform: translateZ(-1px) scale(2);
    background-color: blue;
}

.parallax_layer--deep {
    transform: translateZ(-2px) scale(3);
    background-color: green;
}

.static_content {
  margin-top:90%;
  height: 300px;
  background-color: black;
}

<html>
<head>
   
<body>

<div class="parallax">
  <div class="parallax_group">
    <div class="parallax_layer parallax_layer--back">
      <p>Back Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--base">
      <p>Base Layer</p>
    </div>

    <div class="parallax_layer parallax_layer--deep">
      <p>Deep Layer</p>
    </div>
  </div>

<div class="static_content">

</div>
</div>
   </body>
   </html>

我想我解决了你的“滚动条”问题。你可以编辑上边距以减少空白。

【讨论】：

就像 Bold 的回答一样， .parallax div 包裹了整个页面。 .static_content div 现在已包含在此 div 中，而原始问题中没有。

【解决方案2】：

你的代码：-

.parallax {

perspective: 1px;
perspective-origin-x: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

只需去掉“透视：1px;”

.parallax {

perspective-origin-x: 100%;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}

这将删除内部滚动条

【讨论】：

感谢您的回复 Omkar，但这会破坏效果，并且不会删除内部滚动条。

【解决方案3】：

我一直在尝试解决同样的问题。对我有用的是：

body, html {
  overflow: hidden;
}

* {
  margin:0;
  padding:0;
}

您可以在 Keith Clark 的 demo3 here 中看到这一点。它适用于我的 Chrome 和 Firefox for Mac，尚不确定其他环境。

【讨论】：

【解决方案4】：

我遇到了相同（或类似）的问题。我试图创建一个包含一些内容的单个视差 div，但有问题的 div 上出现了一个垂直滚动条。

我的页面是这样设置的：

<body>

    <div class="some-content">
        <h1>Honk</h1>
    </div>

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

    <div class="more-content">
        <h1>Bonk</h1>
    </div>

</body>

我没有意识到，为了让它工作，'.parallax' div 必须环绕我的整个页面：

<body>
    <div class="parallax">

        <div class="some-content">
            <h1>Honk</h1>
        </div>

        <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 class="more-content">
            <h1>Bonk</h1>
        </div>

    </div>
</body>

这为我解决了这个问题。

我还使用了Dylan Awalt-Conley's parallax tweak 来解决 .parallax__layer--back 的背景图像中的轻微偏移

希望这会有所帮助！

【讨论】：