HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pageX vs clientX</title>
  <style>
    body { font-family: sans-serif; padding: 16px; min-height: 200vh; }
    .spacer { height: 80vh; background: linear-gradient(#e0e7ff, #f8fafc); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #475569; }
    #compare { margin-top: 16px; padding: 14px; background: #1e293b; color: #e2e8f0; border-radius: 8px; font-size: 14px; line-height: 1.8; min-height: 4em; }
  </style>
</head>
<body>
  <p>Scroll down, then click anywhere.</p>
  <div class="spacer">Scroll past this block</div>
  <div id="compare">Click after scrolling.</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).on("click", function (event) {
      $("#compare").html(
        "pageX: " + event.pageX + " (document)<br>" +
        "clientX: " + event.clientX + " (viewport)<br>" +
        "scrollY: " + window.scrollY
      );
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery event.pageX — pageX vs clientX (Try It)