How to run javascript class on php script on a wordpress website?

I am developing a website using WordPress and I encounter a problem in the call of the javascript file that contains code that allows me to describe animations according to certain events.

Indeed this file contains functions that are called correctly according to certain events. However this file contains a class and this is where I encounter a problem because I can not access the constuctor of this class and its methods.

here is the template which is a .php file:

<?php

        if(get_field('test'))
        { ?>
       
        <section>

            <div class="overflow-h" id="parallaxContainer">
                <?php if ( wp_is_mobile() ) {?>
                    <img class="full-img">
                <?php } else { ?>
                    <img class="full-img" data-parallax="0.2" ?> id="target">
                <?php } ?>
            </div>
        </section>
       
    <?php
        }
    ?>

here is the javascript file (mains.js):

const scrollContainer = document.querySelector("main");

let isDown = false;
let startX;
let scrollLeft;

scrollContainer.addEventListener('mousedown', (e) => {
    isDown = true;
    startX = e.pageX - scrollContainer.offsetLeft;
    scrollLeft = scrollContainer.scrollLeft;
});

scrollContainer.addEventListener('mouseleave', () => {
    isDown = false;
});

scrollContainer.addEventListener('mouseup', () => {
    isDown = false;
});

scrollContainer.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollContainer.offsetLeft;
    const walk = (x - startX)/10;
    scrollContainer.scrollLeft = scrollLeft - walk;
});

//Can't access to the class...
class Parallax {
    constructor(element) {
        this.element = element;
        this.onScroll = this.onScroll.bind(this);
        document.addEventListener('scroll', this.onScroll)
    }

 
 onScroll() {
    const middleScreenWidth = window.scrollX + window.innerWidth / 2;
}


 bind() {
    return Array.from(document.querySelectorAll("[data-parallax]")).map(
        (element) => {
            return new Parallax(element);
        });
    }
}

this is the .php file that calls the javascript file (main.js): I call my js script thanks to the WordPress function 'add_action'

function call_scripts() {
    wp_enqueue_style( 'call-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_script( 'call-main', get_template_directory_uri() . '/js/main.js', array(), _S_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'call_scripts' );

Thanks for help

Move the bind logic out of the class and put in a seperate function. The reason for this is that you don't want a Parallax instance to be able to create more instances as that is not their concern.

class Parallax {
  constructor(element) {
    this.element = element;
    document.addEventListener('scroll', this.onScroll)
  }

  onScroll = () => {
    const middleScreenWidth = window.scrollX + window.innerWidth / 2;
  }
}

Create a new function that returns an array of Parallax instances. This is factory function pattern, which can help in creating multiple instances.

function createParallax() {
  return Array.from(document.querySelectorAll("[data-parallax]")).map(
    (element) => new Parallax(element)
  );
}

Call the function and store the Parallax instances in a variable.

const parallaxes = createParallax();

Like mentioned earlier: the scroll event listener puts a strain on your performance as it is being called with every pixel. If you have to do that, for let's say 10 elements, then it has to do a new calculation 10 times every pixel. This becomes slow very fast.

The solution for this would be to use a single scroll event listener, make the event handler a passive event listener, and keep track of the elements that are in view, elements outside of view don't have to be animated, which saves performance.