Как сделать такую ​​прокрутку контента? - PullRequest
Новая
       26

Как сделать такую ​​прокрутку контента?

0 голосов
/ 29 мая 2020

Пожалуйста, помогите мне стилизовать прокрутку контента с помощью response и s css следующим образом:

Example 1

Update

Итак, когда элементы прокрутки перекрывают друг друга, у них есть что-то вроде стиля параллакса.

1 Ответ

0 голосов
/ 29 мая 2020

более простым решением будет что-то вроде: 

.contentDivContainer {
  position: absolute;
  left: 100px;
  width: 200px;
  height: 200px;
}

.contentDivs {
  background-color: lightpink;
  font-size: 18px;
  margin: 20px;
}

.contentDivs:nth-child(2n) {
  background-color: lightblue;
}

.windowDivs {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 100px;
}

.windowDivs2 {
  top: 300px;
}

.windowDivsBlank {
  top: 0px;
  z-index: 2;
  background: white;
  height: 50px;
}

.windowDivsBlank2 {
  top: 250px;
  z-index: 2;
  background: white;
  height: 50px;
}

.windowDivsBlank3 {
  top: 500px;
  z-index: 2;
  background: white;
  height: 50px;
}
<div class='windowDivs'></div>
<div class='windowDivs windowDivsBlank'></div>
<div class='windowDivs windowDivs2'></div>
<div class='windowDivs windowDivsBlank2'></div>
<div class='windowDivs windowDivsBlank3'></div>


<div class="contentDivContainer">
  <div class='contentDivs'>
    ONE - Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
  </div>

  <div class='contentDivs'>
    TWO - Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
  </div>

  <div class='contentDivs'>
    THREE - Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling.lue Tip: Try to remove the background-attachment property to remove the scrolling effect.
  </div>

  <div class='contentDivs'>
    FOUR - Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.
  </div>
</div>
...