Scroll with two fingers

HTML

<div class="main">
   <div id="scroll-element">
      <p>
        Scroll the image with two fingers
      </p>
      <img src="https://www.mentaliste.paris/wp-content/uploads/2015/07/pattern-1.png">
    </div>
</div>

CSS

.main
{
  height: 100vh;
}

#scroll-element
{
  margin: auto;
  height: 250px;
  width: 250px;
  overflow-y: scroll;
  overflow-x: hidden;
}

JavaScript

const element = document.getElementById('scroll-element');
let lastTouchY;

element.addEventListener('touchstart', (event) =>
{
  if (event.touches.length === 2)
  {
  	event.preventDefault();
    lastTouchY = event.touches[0].clientY;
  }
});

element.addEventListener('touchmove', (event) =>
{
  if (event.touches.length === 2)
  {
  	event.preventDefault();
    const delta = lastTouchY - event.touches[0].clientY;
    lastTouchY = event.touches[0].clientY;
    element.scrollTop += delta;
    console.log(element.scrollTo);
  }
});