1

Тут есть близкая по смыслу штука, но не то Как выполнить появление элемента при прокрутке страницы?

Мне необходимо:

Выполнить событие цели Яндекс.Метрики при прокрутке страницы до интересующего элемента (мне конкретно до таблицы).

Про Событие цели Яндекс.Метрики - тут https://yandex.ru/support/metrika/objects/reachgoal.xml

1
  • 1
    При скролле у вас есть значение, сколько проскроллили, считаете положение по оси Y относительно верха страницы для вашей таблицы и с помощью значения высоты вьюпорта и нехитрой формулы можете отловить момент, когда элемент появился в видимой области.
    – br3t
    13 апр 2017 в 13:23

3 ответа 3

1

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

<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>

0

В голову приходит такой костыль: Высчитать, на каком расстоянии от верха находится Ваша таблица. Если все высоты заданы в пикселях, то можно просчитать заранее, если в vh, vw и тд, то придётся вышестоящим блокам давать айдишники, скриптом запрашивать их высоты и складывать их.

Далее прописываем функцию CheckScroll(), которая проверяет, на сколько страница прокручена (document.body.scrollTop), сравнивает её с высчитанным числом и при положительном результате выполняет нужные Вам действия.

Функцию эту вызываем при каждом изменении прокрутки: windwo.onscroll = CheckScroll();

7
  • Только мне нужно, чтобы событие выполнилось при появлении таблицы один раз только. Как это реализовать? 13 апр 2017 в 20:16
  • два варианта 1 - при выполнении функции присваивать пустоту window.onscroll 2 - если не сработает, то добавить булиновую переменную, изначально равную false и тогда уже в CheckScroll первым делом спрашивать, равна ли она false. И присваивать ей true при выполнении функции, чтобы функция не отрабатывала снова.
    – Nikita
    13 апр 2017 в 23:26
  • У меня получилось. 14 апр 2017 в 14:55
  • У меня получилось. Но помогите как сделать, чтобы событие выполнялось только один раз. Сейчас при достижении таблицы с классом price-service событие происходит при каждом движении. 15 апр 2017 в 8:45
  • <script> window.onscroll = function() { if ( checkViewport() ) { alert("событие"); } else { } } function checkViewport() { var $myElement = document.getElementById("price-service"), landmark = $myElement.getBoundingClientRect(), visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth return visibility } </script> 15 апр 2017 в 8:47
0

Пишу новый ответ что бы код был легко читаемый

    <script>
      var AlreadyDone = false; //уже отработала? нет.
      var scrolllength = elemen1.style.height + element2.style.height + ... + 'px'; //сумма высот всех блоков над таблицей
      function checkViewport(){
        if (!AlreadyDone && document.body.scrollTop > scrolllength){ //если ещё не AlreadyDone и если Ваша прокрутка больше высчетанной высоты.
          //здесь код, который что-либо делает с таблицей
          AlreadyDone = true; //уже отработала? да. Теперь функция не будет отрабатывать снова.
        }
      }
      window.onscroll = checkViewport();
    </script>
1
  • Спасибо. Только где я возьму сумму высот всех элементов над таблицей. Мне нужно просто событие когда верхняя строчка таблицы становится видимой в окне браузера. 17 апр 2017 в 7:11

Ваш ответ

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

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