pyfisch/foo.html

## foo.html
<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0px;
        }

        #spacer {
            width: 800px;
            height: 500px;
            background-color: grey;
        }

        #demo {
            width: 400px;
            height: 400px;
            background-color: blue;
        }
    </style>
    <script>
        window.onload = function () {
            var demo = document.getElementById('demo');
            demo.onclick = function (e) {
                var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                var y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                x -= demo.offsetLeft;
                y -= demo.offsetTop;
                console.log(`document.body scroll: ${document.body.scrollLeft}, ${document.body.scrollTop}`);
                console.log(`document.documentElement scroll: ${document.documentElement.scrollLeft}, ${document.documentElement.scrollTop}`);
                console.log(`offset: ${demo.offsetLeft}, ${demo.offsetTop}`);
                console.log(`Pos: (${x}|${y})`);
            }
        }
    </script>
</head>

<body>
    <div id="spacer"></div>
    <div id="demo">
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	body {
	margin: 0px;
	}

	#spacer {
	width: 800px;
	height: 500px;
	background-color: grey;
	}

	#demo {
	width: 400px;
	height: 400px;
	background-color: blue;
	}
	</style>
	<script>
	window.onload = function () {
	var demo = document.getElementById('demo');
	demo.onclick = function (e) {
	var x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
	var y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	x -= demo.offsetLeft;
	y -= demo.offsetTop;
	console.log(`document.body scroll: ${document.body.scrollLeft}, ${document.body.scrollTop}`);
	console.log(`document.documentElement scroll: ${document.documentElement.scrollLeft}, ${document.documentElement.scrollTop}`);
	console.log(`offset: ${demo.offsetLeft}, ${demo.offsetTop}`);
	console.log(`Pos: (${x}\|${y})`);
	}
	}
	</script>
	</head>

	<body>
	<div id="spacer"></div>
	<div id="demo">
	</div>
	</body>

	</html>