Есть ли способ предотвратить прокрутку addEventListener "прослушать"? - PullRequest
Новая
       59

Есть ли способ предотвратить прокрутку addEventListener "прослушать"?

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

Я Javascript новичок ie, и я борюсь с приведенным ниже кодом. Позвольте мне объяснить, о чем это.

Первый HTML

  <section class="opiekun">
        <div class="opiekun-img">

        </div>
        <div class="opiekun-desc">
            <p>

            </p>
        </div>

"opiekun" - это контейнер, состоящий из анимированной фотографии ("opiekun-img"), которую нужно вытащить его CSS анимация получает класс «активный», когда вычисляемая позиция секции установлена ​​на <100. </p> 

    const photoOfMe = document.querySelector(".opiekun-img");
    const sectionOpiekun = document.querySelector(".opiekun");
    const opiekunDesc = document.querySelector(".opiekun-desc");
    const textDescription = document.querySelector(".opiekun-desc > p");
    const desc = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore eveniet commodi, veritatis sed inventore delectus adipisci quos voluptas explicabo odio sapiente consequuntur quibusdam magni corrupti magnam amet! Beatae, quos maxime';



function scroll() {
    window.addEventListener("scroll", (e) => {
        let scrollValue = window.pageYOffset;
        let sectionOpiekunPosition = sectionOpiekun.getBoundingClientRect().top;
        let sectionOpiekunStartPosition = sectionOpiekunPosition - scrollValue;

        console.log(sectionOpiekunPosition);
        console.log(scrollValue);
        console.log(sectionOpiekunStartPosition);


        if (sectionOpiekunStartPosition < 100) {

            photoOfMe.classList.add('active');

        }
        writing();
    })

Затем я хочу начать анимацию ввода текста (написание функции). И это работает, но проблема в том, что слушатель Scroll постоянно работает, и в какой-то момент происходит сбой. Я пытался вызвать его за пределами EventListener, но тогда ничего не работает. Обратите внимание, что я хочу, чтобы этот текст анимировался только при выполнении анимированной фотографии (которая анимируется только тогда, когда расчетное значение раздела (opiekun) составляет <100. </p> 

function writing(){  

if (photoOfMe.classList.contains("active")) {

         let index = 0;
        const addLetter = () => {

            textDescription.textContent += desc[index];
            index++;
            if (index === desc.length) clearInterval(typing);
        }
        const typing = setInterval(addLetter, 10);
        console.log('works');

    } else console.log('error');

  }
}

    scroll();

Как заставить его работать?

...