HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clientX — scroll</title>
  <style>
    body { margin: 0; }
    .wide { width: 2000px; height: 120px; padding: 1rem; background: #f0f0f0; }
  </style>
</head>
<body>
  <p>Scroll right, then click near the left of the window.</p>
  <div class="wide">Wide content — scroll → then click near viewport left</div>
  <pre id="out">Click…</pre>
  <script>
    document.addEventListener("click", function (e) {
      document.getElementById("out").textContent =
        "clientX: " + e.clientX +
        "\npageX: " + e.pageX +
        "\nscrollX: " + window.scrollX;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

MouseEvent.clientX — vs pageX after scroll (Try It)