JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <title>IE pageX/pageY iframe test case</title>
</head>
<body>
  Move your mouse around inside the frame in IE, then scroll the frame to see the problem
  <p>Cursor Position: <span id='cursorpos'></span></p>
  <p>Doc Scroll: <span id='scrollpos'></span></p>
  <p>Doc Client Position: <span id='clientpos'></span></p>
  <iframe id='iframe' src='about:blank'></iframe>
</body>
</html>

CSS

#iframe {height:400px; width:400px; overflow:scroll; }

JavaScript

$(function() {
    loadframe()
});

function loadframe() {
      var frame = $("#iframe"),
          cursorpos = $("#cursorpos"),
          scrollpos = $("#scrollpos"),
          clientpos = $("#clientpos"),
          framedoc = frame.contents()[0],
          framebody = framedoc.body;
         
      $(framebody).css("overflow", "scroll").html("<div id='contents'><div id='abs'></div></div>");      
      $(framebody).find("#contents").height(1000).width(1000);
      var helper = $(framebody).find("#abs").css({position:'absolute', backgroundColor:'red', width: '20px', height: '10px' });
      
      $(framedoc).bind("mousemove click", function(ev) {
        cursorpos.text(ev.pageX + ", " + ev.pageY);
        
        var doc = framedoc, body = framebody;
        clientpos.text((doc && doc.clientLeft || body && body.clientLeft || 0) + ", " + (doc && doc.clientTop || body && body.clientTop || 0));
        scrollpos.text((doc && doc.scrollLeft || body && body.scrollLeft || 0) + ", " + (doc && doc.scrollTop || body && body.scrollTop || 0));
        helper.css({
            top: ev.pageY,
            left: ev.pageX
        });
      });
}