JSFiddle - React, Tailwind, and code Playground

by nickcoutsos

HTML

<body>
  <div id="a"></div>
  <div id="b">
    <button>
      hi
    </button>
    <ul>
      <li>foo</li>
      <li>bar</li>
      <li>baz</li>
      <li>qux</li>
      <li>wib</li>
      <li>wob</li>
      <li>wub</li>
    </ul>
  </div>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}

#a, #b {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#a { background-color: powderblue; }
#b { background-color: lightgreen; }
#b ul {
  background-color: white;
  width: 120px;
  height: 80px;
  overflow: auto;
}

#c {
  position: absolute;
  left:50px;
  top: 50px;
  width: 10px;
  height: 20px;
  background: linear-gradient(to top right, black 0%, black 50%, transparent 50%);
  transform-origin: top left;
  transform: rotate(-15deg);
  pointer-events: none;
}

JavaScript

const a = document.querySelector('#a')
const b = document.querySelector('#b')
const c = document.createElement('div')
const button = document.querySelector('button')

c.setAttribute('id', 'c')
b.appendChild(c)

function pipeEvent (event) {
	const { clientX: x, clientY: y } = event
  const rect = b.getBoundingClientRect()
  const element = document.elementFromPoint(x + rect.x, y + rect.y)
  const fakeEvent = new MouseEvent(event.type, {
  	...event,
    clientX: x,
    clientY: y
  })

  element.dispatchEvent(event)
}

a.addEventListener('mousemove', event => {
	c.style.left = event.clientX + 'px'
  c.style.top = event.clientY + 'px'
})

const mouseEvents = ['click', 'wheel']
mouseEvents.forEach(event => {
	a.addEventListener(event, pipeEvent)
})

//a.addEventListener('click', pipeEvent)
//a.addEventListener('mousedown', pipeEvent)
//a.addEventListener('mouseup', pipeEvent)

button.addEventListener('click', () => {
	alert('hi')
})