https://github.com/attitude/scrollpolyfill.js

Scroll Polyfil for Touch Devides
https://github.com/attitude/scrollpolyfill.js

Last synced: about 6 hours ago
JSON representation

Scroll Polyfil for Touch Devides

• Host: GitHub
• URL: https://github.com/attitude/scrollpolyfill.js
• Owner: attitude
• Created: 2014-07-17T16:00:22.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-08-07T18:50:06.000Z (over 8 years ago)
• Last Synced: 2023-03-11T07:18:33.968Z (over 1 year ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 2
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
scrollPolyfill.js

=================

Experimental scroll polyfil for touch devides.

Enables:

- parallax animation on devices which is not possible due to scroll event delay

- [use `overflow-y` and `position:fixed` via `position:absolute` hack](www.martinadamko.sk/posts/197)

## The problem and the solution

1. Touch does not fire during scroll on mobile/touch enabled devices.

2. Touch devices pause scripting after fast flick move until animation finishes.

Scripts trigger missing scroll events by attaching to native `touchstart`, `touchmove` and `touchend` events enabling basic paralax effects even on touch devices.

The Lite version of the script actually does no scrolling at all, just monitors areas for scrolling change. Than it triggers scroll event when the scroll change occurs. Paralax will work while slow scrolling the page, but will stop during the momentum scrolling and will continue to work only after the animation finishes. This behaviour might cause jumpy paralax experience.

If you need to support parallax during the momentum scrolling, try the full version of the script which halts native scroll and tries to emulate it back.

## How to use

This is a drop-in, no installation script. Just include the script before the `