2018-08-12 admin


什么是trackpad-scroll-emulator,A jQuery plugin that emulates OSX trackpad-style scrollbars in any browser or platform.


<script src=“js/jquery-1.7.1.min.js”></script> <script src=“js/jquery.trackpad-scroll-emulator-1.0.min.js”></script>

Mark up the content you wish to scroll like so:

<div class=“tse-scrollable wrapper”> <div class=“tse-content”> My content </div> </div>

For horizontal scrolling add the class `horizontal` to the `tse-content` element:

<div class=“tse-scrollable wrapper”> <div class=“tse-content horizontal”> My content </div> </div>

In the above examples the `wrapper` class is not required, but gives us a unique hook to use as a jQuery selector when initializing the plugin:


### [](#options)Options

Options can be applied to the plugin during initialization:

$(’.wrapper’).TrackpadScrollEmulator({ option1: value1, option2: value2 });

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:


### [](#destroying-the-plugin)Destroying the plugin

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


### [](#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:

.wrapper { width: 250px; /* Example of overwiting default width */ }

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`:

<noscript> <style> .tse-scrollable { overflow-y: scroll; } .tse-scrollable.horizontal { overflow-x: scroll; overflow-y: hidden; } </style>


转载请注明:文章转载自 JavaScript中文网 []