JSFiddle - React, Tailwind, and code Playground

by PlĂ­nio Naves

HTML

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<div class="parent">
  <div class="main-1">
    <div class="overflow"></div>
  </div>

  <div class="main-2">
    <div class="not-overflow"></div>
  </div>
</div>

CSS

html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.parent {
  width: 350px;
  height: 350px;
  position: relative;
  border: 2px solid red;
}

.main-1, .main-2 {
  width: 350px;
  height: 350px;
  z-index: 10;
  position: absolute;
}

.main-1 {
  overflow: hidden;
}

.overflow, .not-overflow {
  width: 200px;
  height: 200px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  
}

.overflow {
  background: yellow;
  z-index: 20;
}

.not-overflow {
  border: 2px solid green;
  z-index: 30;
}

JavaScript

const parent = document.querySelector('.parent')
const overflow = document.querySelector('.overflow')
const notOverflow = document.querySelector('.not-overflow')
let canDrag = false

const setPosition = (event, el) => {
  const style = getComputedStyle(el)
  const width = style.width.slice(0, -2)
  const height = style.height.slice(0, -2)
  const x = event.offsetX - (width / 2)
  const y = event.offsetY - (height / 2)

  el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)'
}

parent.addEventListener('mousemove', e => {
	if (canDrag) {
  	setPosition(e, overflow)
    setPosition(e, notOverflow)
  }
})

var hammertime = new Hammer(notOverflow)

hammertime.on('panstart', function(ev) {
	canDrag = true
})

hammertime.on('panend', function(ev) {
	canDrag = false
})