-
Notifications
You must be signed in to change notification settings - Fork 41
Post
Inertial input device is a device such as touchscreens, trackpads, magic mouse, etc. Trackpad and magic mouse resemble the touchscreen of mobile devices, i.e. continue to generate events after the user has completed the gesture. But unlike them we have no native touchstart event. All we have is the event object of "wheel"-event. "Touchstart" is often necessary to comfortably implement the so-called fullpage-sites where when scrolling there is a transition between screens. An example of such a site is "alfabank". It also present the problem of scroll two screens in a row when using a magic mouse or trackpad (especially on the MacBook). Rather weak gesture scrolls down to the second, and then immediately to the third screen. That's the kind of problem we tried to solve it using only the event object wheel.
So, how to implement "touchstart"? Let's start with the simple and will move incrementally. The simplest variant of implementation "touchstart": 0. Silence.
- Start generated event of "wheel". This is it, this is our "touchstart"
- Suppose that between events cannot be greater than 200ms (actually 10 to 30ms), so just after 200 MS after the last event, again generated "touchstart", when new events occur.
Not too bad, two pages will not scroll in a single motion. But there is a significant problem: trying to start a new iteration scrolling to the end will only lead to a lengthening of the current.
To solve this problem, you need to understand when the user has made a new gesture until the end of the previous iteration. After analyzing the event object wheel, we immediately noticed the field deltaY. It reflects the strength with which the current time is displayed. If the display deltaY values on a graph, the gesture will have something like this: