https://github.com/davidaurelio/TouchScroll

TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Mobile. It is meant to mimic “native” scrolling feeling and behavior as much as possible.
https://github.com/davidaurelio/TouchScroll

Last synced: 13 days ago
JSON representation

TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Mobile. It is meant to mimic “native” scrolling feeling and behavior as much as possible.

• Host: GitHub
• URL: https://github.com/davidaurelio/TouchScroll
• Owner: davidaurelio
• License: bsd-2-clause
• Created: 2010-04-27T13:28:07.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2011-06-19T22:34:02.000Z (over 13 years ago)
• Last Synced: 2023-11-07T14:11:28.451Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
• Size: 2.47 MB
• Stars: 472
• Watchers: 16
• Forks: 61
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
TouchScroll

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

TouchScroll is a JavaScript/CSS 3-based scrolling layer for Webkit Mobile, espeacially iPhone, Android, and iPad. It allows to configure scrolling behaviour in many ways and to use fixed interface elements.

Dependencies

---------------------------------------

TouchScroll depends on [css-beziers][], a library for computations on cubic bezier curves.

[css-beziers]: http://github.com/davidaurelio/css-beziers

Usage

---------------------------------------

To use TouchScroll you need an element with fixed height. Have a look at the demo for an elegant solution using `display: -webkit-box`.

The stylesheet is mandatory at the moment. It will be made optional in the future for cases when scrollbars aren’t needed.

    

    

    


        

    

    

    

    

        var scroller = new TouchScroll(document.querySelector("#scroller"));

    


To enable the elasticity/bouncing effect, add `{elastic: true}` as second parameter to the instantiation:

    

        var scroller = new TouchScroll(document.querySelector("#scroller"), {elastic: true});

    

Set the scroller to `overflow: auto` to enable scrolling in other environments.

The scroller automatically adapts its size to content changes and window resizes/orientation changes.

Limitations/Known Issues

---------------------------------------

 - TouchScroll currently doesn’t work well with forms on Android.

 - The scroller element shouldn’t have any padding.

 - Because two wrapper `
`s are inserted inside of the scroller, the CSS

   child selector (`#scroller > foo`) might not work as expected.

 - When a scroller is invisible, it can’t adapt its size correctly. Call its `setupScroller` method to fix that (e.g. after making a scroller visible by setting `display: block` on it).

 - Tapping the status bar on iPhone doesn’t trigger “scroll to top”.

 - Selecting text doesn’t work on the iPad and on some iPhone versions (OS 4.0b2) – an issue with cancelling events?


To Do

---------------------------------------

 - Keep the scrollbars round while bouncing – I already know how to do this.

 - Investigate whether support for tapping the status bar on iPhone can be added.

 - Investigate how selecting text and using the context menu can be re-enabled on iPhone/iPad.

 - Add an option to completely switch off scrollbars.

 - Find a solution to the event problems on Android – help greatly appreciated!

Contact

---------------------------------------

E-Mail: [da AT uxebu.com](mailto:da%20AT%20uxebu.com)

Twitter: [@void_0](http://twitter.com/void_0)