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，视差效果正常，溢出设置为自动，但当我关闭它时它打破了paralax效果。

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

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

Answer 1

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

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

这将解决您的问题。但正如您可以看到其供应商前缀依赖。所以它只适用于webkit浏览器。

隐藏滚动条但使用父div滚动

1 个答案: