Redirect (touch) scroll event from one element to another

[m3g4p0p]

@hrishi5200

My code was something on these lines:

var lastY = 0;
$('body').bind('touchmove', function (e)
	{
		var currentY = e.originalEvent.touches[0].clientY;
		var deltaY2 = currentY-lastY;
		('.scroll').scrollTop = deltaY2;
		lastY = currentY;
	});

Hi @hrishi5200, there are a couple of issues with that code: you forgot the $ so you’re effectively setting a scrollTop on the string ".scroll"; furthermore, in jQuery that would have to be a function call rather than an assignment; and you should add the delta to the scroll top, not set it to the delta; and finally, you have to clear the last touch on touch end so it doesn’t get set back when the next move occurs. So together it should look something like this instead:

var lastTouch = null

window.addEventListener('touchstart', function (event) {
  lastTouch = event.touches[0]
})

window.addEventListener('touchend', function (event) {
  lastTouch = null
})

window.addEventListener('touchmove', function (event) {
  var currentTouch = event.changedTouches[0]
  
  if (lastTouch) {
  	target.scrollTop += currentTouch.clientY - lastTouch.clientY
  }
  
  lastTouch = currentTouch
})

(To support multiple touch points you’d have to find the current touch by comparing it to the last touch’s identifier though.)