Not load scrolling with JS button

Hi,

My Web has many divs with 100vh height. Every div is a post.

I load 5 posts and every time I start to scroll, reload another 5.

When I scroll with the wheel of the mouse, this plugin works perfectly (obviusly) but when I try to scroll with a JS Button doesn’t work. I need to scroll with the mouse.

Any solutions???

Many thanks!

Ignacio.

This is the code:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post" sticky_posts="true" transition="none" scroll_distance="-500%"]');

<div class="media_section fadeIn">
  <i class="media_arrow_down" id="media_arrow_down"></i>
</div>
<div class="media_section fadeIn">
  <i class="media_arrow_down" id="media_arrow_down"></i>
</div>
...

.media_section {
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;
    background-size: cover;
}

document.querySelectorAll(".media_arrow_down").forEach(element => {
    element.addEventListener("click", () => {
      $nextSection = element.parentNode.nextSibling;
      $nextSection.scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "start"
      })
    })
  })