Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonathan Nicol authored Apr 26, 2017
1 parent ac10a4f commit 1f253f3
Showing 1 changed file with 16 additions and 16 deletions.
32 changes: 16 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
**IMPORTANT** This repository is no longer maintained. We recommend using SimpleBar(https://github.com/Grsmto/simplebar) which is an actively maintained fork of trackpad-scroll-emulator.
**IMPORTANT** This repository is no longer maintained. We recommend using SimpleBar(https://github.com/Grsmto/simplebar) which is an actively maintained fork of trackpad-scroll-emulator. Thanks to those who contributed to this project.

<hr>

#Trackpad Scroll Emulator
# Trackpad Scroll Emulator

A jQuery plugin that emulates OS X trackpad-style scrollbars in any browser or platform. Based on the scrollbars in the Rdio app.

Expand All @@ -13,7 +13,7 @@ A jQuery plugin that emulates OS X trackpad-style scrollbars in any browser or p
5. [Limitations](#5-limitations)
6. [Credits](#6-credits)

##1. What it does
## 1. What it does

Traditionally scrollbars are permanently displayed whenever an area of a webpage is scrollable. By contrast, scrollbars in OS X are hidden from sight, and revealed only when the user executes a swipe gesture with a 'magic' trackpad pointing device.

Expand All @@ -23,13 +23,13 @@ Modern browsers get a very accurate emulation of OS X's scrollbars, while less c

View a demo: http://jnicol.github.io/trackpad-scroll-emulator/

##2. Dependencies
## 2. Dependencies

Trackpad Scroll Emulator has the following dependencies:

- jQuery

##3. Usage
## 3. Usage

Include jQuery and Trackpad Scroll Emulator in your document. The paths and filenames may differ from those shown here:

Expand Down Expand Up @@ -57,7 +57,7 @@ In the above examples the `wrapper` class is not required, but gives us a unique

$('.wrapper').TrackpadScrollEmulator();

###Options
### Options

Options can be applied to the plugin during initialization:

Expand All @@ -68,35 +68,35 @@ Options can be applied to the plugin during initialization:

Available options are:

####wrapContent
#### wrapContent

By default TrackpadScrollEmulator requires minimal markup, as shown above. When initialized it will wrap the `tse-content`element in a div with the class `tse-scroll-content`. If you prefer to include this wrapper element directly in your markup you can switch the default behaviour off by setting the `wrapContent` option to `false`:

$('.wrapper').TrackpadScrollEmulator({ wrapContent: false });

Default value is `true`

####autoHide
#### autoHide

By default TrackpadScrollEmulator automatically hides the scrollbar if the user is not scrolling. You can make the scrollbar always visible by setting the `autoHide` option to `false`:

$('.wrapper').TrackpadScrollEmulator({ autoHide: false });

Default value is `true`

###Notifying the plugin of content changes
### Notifying the plugin of content changes

If you later dynamically modify your content, for instance changing its height or width, or adding or removing content, you should recalculate the scrollbars like so:

$('.wrapper').TrackpadScrollEmulator('recalculate');

###Destroying the plugin
### Destroying the plugin

To remove the plugin from your element, call its `destroy` method:

$('.wrapper').TrackpadScrollEmulator('destroy');

###Overwriting the content dimensions
### Overwriting the content dimensions

The dimensions of the `tse-scrollable` wrapping element determine the visible dimensions of your content. Chances are that you'll want to change the width or height of the wrapping element, which can be done using CSS or JavaScript:

Expand All @@ -106,7 +106,7 @@ The dimensions of the `tse-scrollable` wrapping element determine the visible di

The demo bundled with Trackpad Scroll Emulator demonstrates how you might dynamically alter the dimensions of `tse-scrollable` using JavaScript.

###Non-JS fallback
### Non-JS fallback

Trackpad Scroll Emulator hides the browser's default scrollbars, which obviously is undesirable if the user has JavaScript disabled. To restore the browser's scrollbars you can include the following `noscript` element in your document's `head`:

Expand All @@ -122,23 +122,23 @@ Trackpad Scroll Emulator hides the browser's default scrollbars, which obviously
</style>
</noscript>

##4. How it works
## 4. How it works

For the most part Trackpad Scroll Emulator uses the browser's native scrolling functionality, but replaces the conventional scrollbar with a custom CSS-styled scrollbar. The plugin listens for scroll events and redraws the custom scrollbar accordingly.

Key to this technique is hiding the native browser scrollbar. In modern browsers (i.e. WebKit) this is achieved simply by giving the scrollbar a width/height of zero using the `::webkit-scrollbar` and `::scrollbar`pseudo selectors. In other browsers the scrollable element is made slightly wider/taller than its containing element, effectively hiding the scrollbar from view.

##5. Limitations
## 5. Limitations

Trackpad Scroll Emulator can currently handle vertical or horizontal scrollbars, but not both simultaneously.

##6. Credits
## 6. Credits

Obviously most of the credit for this technique goes to Rdio's developers. Rdio is a Backbone application, so their solution is a combination of Backbone, Underscore, jQuery, CSS and Bujagali (their own templating system). What I have done is to recreate the same scrolling functionality using only jQuery and CSS.

Credit is also due to Jonathan Sharp, who wrote the original function for measuring the width of the browser's scrollbar (http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php).

###Additional contributors
### Additional contributors

Yoh Suzuki: wrapContent option
Adrien Grsmto: autoHide option
Expand Down

0 comments on commit 1f253f3

Please sign in to comment.