I am working on a webapp where I have pages with multiple horizontally scrolling panels. I want to handle the horiziontal scroll via my own vanilla JS code. Given that I need to do this many times over I thought I would wrap that functionality in an ES6 class. My effort are along the following lines

class HoriScroll 
{
 constructor(id)
 {
  this.target = document.getElementById(id);
  this.target.addEventListener('touchstart',this.slideStart,{passive:true});
  this.target.addEventListener('touchmove',this.slideMove,{passive:true});
  this.target.dataset.startX = null;
  this.target.dataset.startTime = null;
  this.target.dataset.movePending = false;
 }

 slideStart(e)
 {
  if (1 === e.changedTouches.length) 
  {
   this.dataset.startX = e.changedTouches[0].screenX;
   this.dataset.startTime = Date.now();
  } 
 }
}

While I will be able to get things working this way what bothers me is the rather clumsy way I am recording startX, startTime etc - as attributes of the dataset of the horizontal scroll target HTML element. I ended up doing this since I cannot work out a way to access instance variable values in the class. For instance in slideStart this refers to the HTML element instance, not the HoriScroll class instance.

How, if at all, can this be done.