JSFiddle - React, Tailwind, and code Playground

HTML

<section class="hover-me">
    hover/touchmove for values (hover from left)
  </section>
  
  <h4 class="type"></h4>
  <h4 class="offset-left"></h4>
  <h4 class="page-x"></h4>
  <h4 class="client-x"></h4>
  <h4 class="x"></h4>
  <h3 class="result"></h3>
  <br>
  <h4 class="offset-x"></h4>
  <h3 class="use-offsetX"></h3>

CSS

html {
  height: 100%;
  position:relative;
}

body {
  padding: 0;
  margin: 0;
  position:fixed;
  width:100%;
  height:100%;
  overflow: hidden;
  font-size : 1.2rem;
  transform-origin:top left;
}

@media (max-width:1000px) {
  body { transform:scale(0.65); width: calc( 100% / 0.65); height: calc( 100% / 0.65);}
}
@media (min-width:1001px) and (max-width:1100px) {
  body { transform:scale(0.7); width: calc( 100% / 0.7); height: calc( 100% / 0.7);}
}
@media (min-width:1101px) and (max-width:1200px) {
  body { transform:scale(0.75); width: calc( 100% / 0.75); height: calc( 100% / 0.75); }
}
@media (min-width:1201px) and (max-width:1300px) {
  body { transform:scale(0.8); width: calc( 100% / 0.8); height: calc( 100% / 0.8); }
}
@media (min-width:1301px) and (max-width:1400px) {
  body { transform:scale(0.85); width: calc( 100% / 0.85); height: calc( 100% / 0.85); }
}
@media (min-width:1401px) and (max-width:1500px) {
  body { transform:scale(0.9); width: calc( 100% / 0.9); height: calc( 100% / 0.9); }
}
@media (min-width:1501px) and (max-width:1600px) {
  body { transform:scale(0.95); width: calc( 100% / 0.95); height: calc( 100% / 0.95); }
}
@media (min-width:1601px) {
  body { transform:scale(1); width: calc( 100% / 1); height: calc( 100% / 1); }
}

section.hover-me {
  touch-action: none;
  border: 1px solid;
  height: 100px;
  width: 300px;
  position: absolute;
  left: 400px;
  top: 30px;
}

.result {
  color: red;
}

JavaScript

const element = document.querySelector('.hover-me')
const type = document.querySelector('.type')
const offsetLeft = document.querySelector('.offset-left')
const pageX = document.querySelector('.page-x')
const clientX = document.querySelector('.client-x')
const x = document.querySelector('.x')
const offsetX = document.querySelector('.offset-x')
const result = document.querySelector('.result')
const useOffsetX = document.querySelector('.use-offsetX')


const handleMove = (e) => {
  console.log('handleMove')
  
  const event = (e.type == 'touchmove') ? e.changedTouches[0] : e
  type.innerHTML = `event type: ${event.type}`
  offsetLeft.innerHTML = `element.offsetLeft: ${element.offsetLeft}`
  pageX.innerHTML = `e.pageX: ${event.pageX}`
  clientX.innerHTML = `e.clientX: ${event.clientX}`
  x.innerHTML = `e.x: ${event.x}`
  offsetX.innerHTML = `e.offsetX: ${event.offsetX}`
  
  if(e.pageX < element.offsetLeft) {
    result.innerHTML = `not plausible e.pageX (${event.pageX}) is smaller than element.offsetLeft (${element.offsetLeft})`
  } else {
    result.innerHTML = '<br>'
  }
  
  if(event.offsetX) {
    useOffsetX.innerHTML = `offsetX property available: ${event.offsetX}`
  }else {
    useOffsetX.innerHTML = 'no offsetX'
  }
}


element.addEventListener('mousemove', handleMove)
element.addEventListener('touchmove', handleMove)
//element.addEventListener('pointermove', handleMove)