IntersectionObserver: событие триггера при прокрутке вверх - PullRequest
Новая
       35

IntersectionObserver: событие триггера при прокрутке вверх

0 голосов
/ 22 марта 2019

Я начинаю использовать API IntersectionObserver и могу создавать некоторые базовые анимации, в том числе скрытие и отображение элементов. Однако, когда человек хочет прокрутить назад до вершины, элементы, которые исчезли из-за одного из триггеров, больше не становятся видимыми.

Мое решение до сих пор

Поэтому я подумал, что мог бы создать другую тестовую переменную в функции обратного вызова наблюдателя на пересечении (переменная stepI и stepII в моем коде), которая проверяет, была ли ранее вызвана функция обратного вызова. Если это так, вместо того, чтобы исчезать элементы, пусть они появятся снова.

Моя текущая проблема

Допустим, фоновое изображение (id="hiddenImg") должно появиться, когда первый текстовый блок (id="I") пересекает границу 50% области просмотра, и исчезает, когда второй текстовый блок (id="II") входит в эту область. , Даже если изображение снова становится видимым при прокрутке назад, если пользователь не выполняет прокрутку назад полностью (так что второй текстовый блок выходит за пределы области просмотра), а затем прокручивает обратно вглубь, исчезающий триггер этого второго текстового блока не называется. Это будет означать, что фоновое изображение останется видимым, чего не должно быть.

Вот часть js: 

var stepI = false;
var stepII = false;

// list of options
    let options = {
      rootMargin: '0px 0px -50%' //WHEN reaching half of the viewport
    };

// instantiate a new Intersection Observer  
"use strict";

var intersectionObserver = new IntersectionObserver(function (entries, observer) {
  entries.forEach(function (change) {
      if (change.isIntersecting) {
          if (change.target.id == "I") {
            $("#hiddenImg").removeClass("hidden_img");
            $("#hiddenImg").addClass("visible_img");

            stepI = true;

            observer.unobserve(change.target);
          } 


          if (change.target.id == "II") {
              if (stepII == false) {
                  $("#hiddenImg").removeClass("visible_map");
                  $("#hiddenImg").addClass("hidden_map");

                  stepII = true

              } else {
                $("#hiddenImg").removeClass("hidden_map");
                $("#hiddenImg").addClass("visible_map");

                stepII = false;
              }
          }
      } 
    });
},options);

// list of paragraphs
let elements = document.querySelectorAll(".stepper");

for (let elm of elements) {
  intersectionObserver.observe(elm);
}

Вот мой полный код: 

<html>
<head>
<!-- Load the polyfill. -->
<script src="/js/intersection-observer.js"></script>

<script src='https://unpkg.com/intersection-observer@0.5.0/intersection-observer.js'></script>

</head>
<body>
<style>
    .intro-imgs {
display: block;
margin: 0 auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;
position: fixed;
position: expression(fixed);
}

.hidden_img {
visibility: hidden;
  opacity: 0;
-ms-transform: scaleX(0); /* IE 9 */
-webkit-transform: scaleX(0); /* Safari 3-8 */
-o-transform: scaleX(0);
-moz-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: visibility 0s 0.5s, opacity 0.5s linear, -webkit-transform 0.5s;
-moz-transition: visibility 0s 0.5s, opacity 0.5s linear, -moz-transform 0.5s;
-o-transition: visibility 0s 0.5s, opacity 0.5s linear, -o-transform 0.5s;
transition: visibility 0s 0.5s, opacity 0.5s linear, transform 0.5s;
}

.visible_img {
  visibility: visible;
  opacity: 1;
-ms-transform: scaleX(1); /* IE 9 */
-webkit-transform: scaleX(1); /* Safari 3-8 */
-o-transform: scaleX(1);
-moz-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition: opacity 0.5s linear, -webkit-transform 0.5s;
-moz-transition: opacity 0.5s linear, -moz-transform 0.5s;
-o-transition: opacity 0.5s linear, -o-transform 0.5s;
transition: opacity 0.5s linear, transform 0.5s;
}

.stepper{
        max-width: 70rem;
    margin: 550px auto 600px auto;
    width: 90%;
    background-color: rgba(248, 248, 248, 0.95);
    font-family: "Helvetica";
    font-size: 17px;
    line-height: 26px;
    padding: 15px;
}
</style>

<!--HTML-->
  <div class="headline">
        <img id="hiddenImg" class="hidden_img intro-imgs" src="https://image.shutterstock.com/image-photo/funny-portrait-hero-260nw-410898763.jpg" >
  </div>
  <div id="I" class="stepper">
    <p>Lorem Ipsum</p>
  </div>
  <div id="II" class="stepper">
    <h1>THE HEADLINE</h1>
  </div>

<!-- SCRIPT-->
<script>
var stepI = false;
var stepII = false;

// list of options
    let options = {
      rootMargin: '0px 0px -50%' //WHEN reaching half of the viewport
    };

// instantiate a new Intersection Observer  
"use strict";

var intersectionObserver = new IntersectionObserver(function (entries, observer) {
  entries.forEach(function (change) {
      if (change.isIntersecting) {
          if (change.target.id == "I") {
            $("#hiddenImg").removeClass("hidden_img");
            $("#hiddenImg").addClass("visible_img");

            stepI = true;

            observer.unobserve(change.target);
          } 


          if (change.target.id == "II") {
              if (stepII == false) {
                  $("#hiddenImg").removeClass("visible_map");
                  $("#hiddenImg").addClass("hidden_map");

                  stepII = true

              } else {
                $("#hiddenImg").removeClass("hidden_map");
                $("#hiddenImg").addClass("visible_map");

                stepII = false;
              }
          }
      } 
    });
},options);

// list of paragraphs
let elements = document.querySelectorAll(".stepper");

for (let elm of elements) {
  intersectionObserver.observe(elm);
}
</script>
</body>
...