I need a way to find the coordinates of a mouseclick relative to the entire document. I am aware of pageX and pageY, but these values do not take in account the true entire document, or rather what I really mean is, these values do not consider the currently viewable document, AND the left over scrollable document. So while the X value is fine because this page does not scroll on the X-axis, it means that the Y value will change depending on WHERE the user is on account of the ability to scroll.
I feel like I must be missing something obvious?
I think you should add to the "clientY" the value of the "window.scrollY" position in the event sender (if you use the "onmousemove" event)
I've made an example for you
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<title>Test</title>
<style>
body {
height: 100;
width: 100%;
}
#mouse {
position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
font-size: 50px;
}
</style>
</head>
<body>
<div id="mouse"></div>
<div id="test"></div>
</body>
<script>
onmousemove = function(e){
document.getElementById("mouse").innerText = e.clientX + " - " + (e.clientY + window.scrollY) + " - " + window.scrollY
}
let testDiv = document.getElementById("test");
for (let index = 0; index < 1000; index++) {
let tempDiv = document.createElement("div");
tempDiv.innerText = "test" + index;
testDiv.appendChild(tempDiv);
}
</script>
</html>