css - 隐藏滚动条但与父 div 一起滚动

Question

我正在尝试为我的 wordpress 网站创建一个视差标题，我正在使用 divi 主题。

这是我的代码:HTML:

<div class="parallax">
<div class="parralax__layer parallax__layer--back">
    <img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
  </div>>
<div class="parralax__layer parallax__layer--base">
    <img src="https://crispimages.co/wp-content/uploads/2018/05/layer_5.png">
  </div>
</div>

CSS:

.parallax {
  perspective: 1px;
  height: 25vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.parallax__layer {
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
}

.parallax__layer--base {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--back {
transform: translateZ(-15px) scale(2);
}

我的问题是我的标题有这个单独的滚动条，因为它在我页面其余部分的上方 DIV 中，视差效果在溢出设置为自动时工作正常，但是当我关闭它时它会破坏视差效果。

如何让页眉元素与页面的其余部分一起滚动，同时仍将溢出设置为自动？

你可以看到我在这里遇到的问题: https://crispimages.co/home/

Answer 1

您可以添加以下样式规则:

.parallax::-webkit-scrollbar {
    display: none;
}

这将解决您的问题。但是正如您所看到的，它依赖于供应商前缀。所以它只能在 webkit 浏览器中工作。