JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html><head></head>
<body><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <div>Try scrolling the iframe.</div>

  <p>Paragraph - <span>Scroll happened!</span></p>
     <p>Paragraph - <span>Scroll happened!</span></p> 
     <p>Paragraph - <span>Scroll happened!</span></p> 
     <p>Paragraph - <span>Scroll happened!</span></p> 
     <p>Paragraph - <span>Scroll happened!</span></p> 

</body>
</html>

CSS

div { color:blue; }
  p { color:green; }
  span { color:red; }

JavaScript

$(document).ready(function(){
  


var scrollTimer = null;
$(window).scroll(function () {
    if (scrollTimer) {
        clearTimeout(scrollTimer);   // clear any previous pending timer
    }
    scrollTimer = setTimeout(handleScroll, 500);   // set new timer
});


});

function handleScroll() {
    scrollTimer = null;
    $("span").append('<b>текст</b><br/>');  
}