Hammer.js touch-emulator and overflow:touch

Using JavaScript with Hype
1

Hey Guys,

I am somehow stucked with this: I am trying to offer the same experience on desktop for some scrolling contents inside of a div like the scrolling on mobile devices. On mobile I am using -webkit-overflow-scrolling: touch; and that is fine. After experimenting with a few libraries, I stumbled across hammer.js and the hamme.js touch emulator.

The question is: how could I use the emulator to touch drag on a container with -webkit-overflow-scrolling: touch; ? I have built a little Hype project. The script seems to work – at least I am getting some log events while I am dragging with the mouse over the div but the content is not scrolling…

Anybody an idea?

hammer.zip (491.4 KB)

P.S. a side question here – is there a way to prevent the vertical overscoll of the complete Hype document in Hype-Reflect?

2

It looks like the touch-emulators only goal is to be able to send touch events. You are getting those in your document correctly. It doesn't specifically changes behavior or emulates scrolling; that is up to you to do manually or using Hammer.js.

I'm a little uncertain on what you mean by "overscroll." You could generally override the overflow and set specific properties for overflow-x and overflow-y. For iOS you may need to override touchmove and do something fancier there to only allow scrolling in one direction. (Also note you may need/want to change the viewport settings in the Document Inspector).

3

Thanks @jonathan! Regarding my side question: I have a fixed size full screen hype scene. If I am touch-dragging somewhere in my scene, the complete scene will move (and than snap-back) in the y direction (something like over-drag). I am pretty sure that I did something in the past to prevent this, but I can’t remember what it was :slight_smile: This is happening in Mobile Safari and in Hype Reflect…

4

never mind – after setting this in my header I got what I was looking for. Just not sure if I will run into some other problems with this :slight_smile:

body,
html {
  position: fixed;
}

EDIT: bam! This is no solution :slight_smile: This will disable all my draggable / scrollable elements etc… So my question is still open :slight_smile:

5

Typically you would do code like:

document.body.addEventListener("touchmove", function(event) { event.preventDefault(); });

However in reading this thread, it looks like this might not work on iOS 10 and you might need a workaround like:

window.addEventListener("touchmove", function() {});

However this may interfere with your other touch move events; if this is the case I don’t know if there’s a good workaround.

6

Thanks Jonathan. This is helpful. Will try this out. Either it works, otherwise I have to live with the situation…

1 Like