1

Как правильно написать el.onscroll = function(){}, чтобы, когда блок с классом start виден на экране - запустить функцию:

i = 60;
setInterval(function{
 target.innerHTML = i;
 i--;

 if(i < 1){
    start.remove();
 }
}, 1000)

Для понимания:

<section>
  <div>
      <!-- контент сайт -->
  </div>
  <div class="start">
    <p class="target"></p>
  </div>
</section>

1 ответ 1

2

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

когда помеченный классом .item элемент появляется на экране, ему накидывается класс .show

<style>
  body{
    margin:0;
    overflow:hidden;
  }

  #container {
    overflow-y: scroll; 
    height: 100vh; 
    overflow-x:hidden
  }

  .empty {
    height: 1000px;
  }

  .item {
    font-size: 50px;
    padding: 30px;
    opacity: 0;
    transition: 1000ms;
    text-align: center;
  }

  .item.show {
    opacity: 1;
  }

  .item2.show {
    transform: rotate(360deg);
  }

  .item3.show {
    transform: translate(-100px,100px);
  }

  .item4.show {
    transform: scale(2);
  }
</style>

<div id="container">
  <div class="item item1">SCROLL DOWN</div>
  <div class="empty"></div>
  <div class="item item2">SCROLL DOWN</div>
  <div class="empty"></div>
  <div class="item item3">SCROLL DOWN</div>
  <div class="empty"></div>
  <div class="item item4">END</div>
</div>

<script>
  let container = document.getElementById('container');
  let containerRect = document.body.getBoundingClientRect();
  let trackElements = [...document.querySelectorAll('.item')];

  container.onscroll = function() {
    trackElements.forEach(el => {
      let r = el.getBoundingClientRect();
      if (intersectRect(r, containerRect) && container.last !== el) {
        container.last = el;
        el.classList.add('show')
      }
    });
  }

  container.onscroll();

  function intersectRect(r1, r2) {
    return !(r2.left > r1.right || r2.right < r1.left || 
             r2.top > r1.bottom || r2.bottom < r1.top);
  }
</script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.