JSFiddle - React, Tailwind, and code Playground

by deadlyicon

HTML

<body>
  <div class="report"></div>
  <div class="content">
    <div class="left">
      <a href="">left link</a>
      <p>hit tab to see the page content move</p>
      <p>Can you find a way to detect what changed?</p>
    </div>
    <div class="right">
      <a href="">right link</a>
      <p>hit shift-tab to see the page content move back</p>
      <p>Can you find a way to detect what changed?</p>
    </div>
  </div>
</body>

CSS

html, body, .content{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.left, .right{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.right{
  left: 100%;
}

.report{
  position: fixed;
  top: 0;
  right: 0;
  white-space: pre;
  text-align: right;
}

JavaScript

setInterval(function() {
  var report = [];

  report.push("document.documentElement.offsetLeft: "+document.documentElement.offsetLeft);
  report.push("document.body.offsetLeft: "+document.body.offsetLeft);
  report.push(".content.offsetLeft: "+$('.content')[0].offsetLeft);


  $('.report').text(report.join("\n"));
});