Запустите JS, когда отобразите определенный раздел на странице HTML

Question

У меня есть JavaScript TypingText. js, который выполняет «набор текста», однако мне нужно запустить JavaScript «набор текста», когда пользователь прокручивает раздел, где этот текст расположен. Кто-нибудь может мне помочь?

<section id="mysection">
<div id="example1">My text here</div>
</section>        
        
<script type="text/javascript">
// Flag to execute the function only once
let typeTextStarted = false;

// Get the section<s position in the document
let mysectionPosition = $("#mysection").offset()

// Get the view port height
let viewportHeight = $(window).height();

$(window).on("scroll", function() {

  // If scrolled position is more than the section's position MINUS the viewport height
  if ($(this).scrollTop()>mysectionPosition.top - viewportHeight && !typeTextStarted) {

    // Set flag
    typeTextStarted = true;

    new TypingText(document.getElementById("example1"));
    TypingText.runAll();
  }
});     
</script>

Answer 1

Во-первых, вы должны определить, когда раздел виден. Так что немного вычислений не требуется. То есть:

1. Чтобы получить позицию сечения в документе
2. Чтобы получить высоту области просмотра
3. При прокрутке получите позицию прокрутки

Затем, используя флаг, запустить функцию один раз ...

Проверено на CodePen

// Flag to execute the function only once
let typeTextStarted = false;

// Get the section<s position in the document
let mysectionPosition = $("#mysection").offset()

// Get the view port height
let viewportHeight = $(window).height();

$(window).on("scroll", function() {

  // If scrolled position is more than the section's position MINUS the viewport height
  if ($(this).scrollTop()>mysectionPosition.top - viewportHeight && !typeTextStarted) {

    // Set flag
    typeTextStarted = true;

    new TypingText(document.getElementById("example1"));
    TypingText.runAll();
  }
});