Trigger JS when scrolling and record event to PHP

Question

Javascript is recording if someone scrolls more than 400. If someone scrolls more than 400, I want to record this event in PHP somehow, here I will just alert it.

So, if someone scrolls more than 400, there will be an alert coming from the PHP-variable, and not JS-variable.

(Actually, I just want this function to be triggered once, and I want just to record the maximum scroll dept and INSERT that value into a database table, but a solution to my question above will be good enough).

Right now, my code is alerting "PHP: scroll> 400 just occured!" even though no scroll occured!

Can someone provide with a working Ajax solution?

This is my code in header.php:

<?php 

echo '
<script type="text/javascript">
window.onscroll = function() {
  var scrollLimit = 400;
  if (window.scrollY >= scrollLimit) {
  alert("Javascript: scroll> 400 just occured!")
}

};
 </script>';

//  $FromJStoPHP should trigger when window.scrollY >= scrollLimit
if (window.scrollY >= scrollLimit) {
      $FromJStoPHP='PHP: scroll> 400 just occured!';
      echo '<script type="text/javascript">alert("'.$FromJStoPHP.'");</script>';
   }
  
?>

Answer 1

In your PHP script what is happening:

1. You writing string using echo where is your first js script
2. Then you are evaluating if (window.scrollY >= scrollLimit) on server side and it`s true, so you writing another string with your secong js script
3. Somewhere in your other scripts you are sending response, which includes both strings and part of it looks like

<script type="text/javascript">
window.onscroll = function() {
  var scrollLimit = 400;
  if (window.scrollY >= scrollLimit) {
  alert("Javascript: scroll> 400 just occured!")
}

};
 </script>
<script type="text/javascript">alert("PHP: scroll> 400 just occured!");</script>

So in browser it triggers alert PHP: scroll immediately, and spam alerts Javascript: scroll every time, when scrollY > 400.

The only way to record browser scroll event on server is via sending network requests. So you should implement scroll detection logic in your js, which will be executed in browser. As one of possible solution, you can implement http endpoint on your server with PHP, which would handle scrolling event request. When scroll event is detected in browser it send http request to your server.

Here the example of javascript

// this is flag to send event only once
let eventSent = false;
let scrollLimit = 400;
window.onscroll = function() {
  if (window.scrollY >= scrollLimit && !eventSent) {
    eventSent = true; // to not send it more then once
    fetch('path to your http endpoint', {
       method: 'POST',
       headers: {
          "Content-Type": "application/json",
       },
       body: JSON.stringify({ /** here is an object with some usefull payload, like userId or whatever you need */ }),
    });
  }
}

Backend implementation depends on your project specifics.