poltap.blogg.se - Webkit overflow scrolling touch chrom

WEBKIT OVERFLOW SCROLLING TOUCH CHROM HOW TO
WEBKIT OVERFLOW SCROLLING TOUCH CHROM ARCHIVE
WEBKIT OVERFLOW SCROLLING TOUCH CHROM ANDROID

To override the native scrolling iScroll has to inhibit some default browser behaviors, such as mouse clicks. Disabling bounce may help reach smoother results on old or slow devices. When the scroller meets the boundary it performs a small bounce animation. You may try to play with them in case you encounter hiccups and memory leaks. For best performance all the above options should be set to true (or better leave them undefined as they are set to true automatically). If unsure leave iScroll decide what's the optimal config. This greatly increases performance especially on mobile, but there are situations where you might want to disable it (notably if you have too many elements and the hardware can't catch up). This option tries to put the scroller on the hardware layer by appending translateZ(0) to the transform CSS property. On older devices transitions perform better. On modern browsers the difference is barely noticeable. By setting this to false, requestAnimationFrame is used instead. IScroll uses CSS transition to perform animations (momentum and bounce). This might be useful when scrolling sensitive content such as Flash, iframes and videos, but be warned: performance loss is huge. Setting this to false scrolls like we were in 2007, ie: using the top/ left (and thus the scroller needs to be absolutely positioned). eTransformīy default the engine uses the transform CSS property.

WEBKIT OVERFLOW SCROLLING TOUCH CHROM HOW TO

Nonetheless it is important to understand which mechanisms iScroll works on and how to configure them.

Normally you don't need to configure the engine, iScroll is smart enough to pick the best for you. IScroll uses various techniques to scroll based on device/browser capability. By normalized I mean that if you set useTransform:true (for example) but the browser doesn't support CSS transforms, useTransform will be false. The above will return the configuration the myScroll instance will run on. iScroll uses the hardware compositing layer but there's a limit to the elements the hardware can handle. Try to keep the DOM as simple as possible.

There's no limit to the number of iScrolls you can have in each page if not that imposed by the device CPU/Memory. IScroll is a class that needs to be initiated for each scrolling area. Most of the script features are outlined there.

WEBKIT OVERFLOW SCROLLING TOUCH CHROM ARCHIVE

In the archive you'll find a demo folder stuffed with examples. The best way to learn the iScroll is by looking at the demos. Cool, because that is what I'll make you into. iScroll infinite uses a caching mechanism that lets you scroll a potentially infinite number of elements. Handling very long lists of elements is no easy task for mobile devices.

iscroll-infinite.js, can do infinite and cached scrolling.

iscroll-zoom.js, adds zooming to the standard scroll.

(I'm making some more tests, this might end up in the regular iscroll.js script, so keep an eye on it).

If you need to know the scrolling position at any given time, this is the iScroll for you. iscroll-probe.js, probing the current scroll position is a demanding task, that's why I decided to build a dedicated version for it.But if all you need is scrolling (especially on mobile) iScroll lite is the smallest, fastest solution. It doesn't support snap, scrollbars, mouse wheel, key bindings. iscroll-lite.js, it is a stripped down version of the main script.It includes the most commonly used features and grants very high performance in a small footprint. iscroll.js, it is the general purpose script.You can pick the version that better suits your need.Ĭurrently we have the following fragrances: To reach the highest performance it has been divided into multiple versions.

WEBKIT OVERFLOW SCROLLING TOUCH CHROM ANDROID

From older Android devices to the latest iPhone, from Chrome to Internet Explorer.

Out of the box multi-platform support.

You can easily hook to a plethora of custom events (onBeforeScrollStart, onScrollStart, onScroll, onScrollEnd, flick.

Animation can be customized with user defined easing functions (bounce, elastic, back.

You can always get and set the x,y coordinates of the scroller.

Granular control over the scroll position, even during momentum.

Give it a broom and it will also clean up your office.Įven on platforms where native scrolling is good enough, iScroll adds features that wouldn't be possible otherwise. It adds scrolling, zooming, panning, infinite scrolling, parallax scrolling, carousels to your projects and manages to do that in just 4kb. It can handle any element that needs to be moved with user interaction. It has been vigorously optimized for performance and size so to offer the smoothest result on modern and old devices alike. It works on desktop, mobile and smart TV. IScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller.