在 HTML 页面上显示某个部分时运行 JS

Question

I have a JavaScript TypingText.js that executes "typing text", however, I need to run JavaScript "typing text" when a user scrolls to the section where that text is located. Can anyone help me?

 <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

First, you have to detect when the section is visible. So a bit of calculations are required. That is:

1. To get the section's position in the document
2. To get the viewport height
3. On scroll, get the scrolled position

Then, using a flag, run the function once...

Tested on 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();
  }
});