Скрыть полосу прокрутки, но прокрутить с родительским div - PullRequest
Новая
       40

Скрыть полосу прокрутки, но прокрутить с родительским div

0 голосов
/ 04 мая 2018

Я пытаюсь создать заголовок параллакса для моего 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 по сравнению с остальной частью моей страницы, эффект параллакса прекрасно работает с переполнением, установленным на auto, но когда я выключаю его, он нарушает эффект паралакса.

Как заставить элемент заголовка прокручиваться с остальной частью моей страницы, сохраняя при этом переполнение, установленное на авто?

Вы можете увидеть проблему у меня здесь: https://crispimages.co/home/

1 Ответ

0 голосов
/ 04 мая 2018

Вы можете добавить следующее правило стиля: 

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

Это решит вашу проблему. Но, как вы можете видеть, его префикс поставщика зависит. Так что он будет работать только в браузерах webkit.

...