jenkek / jquery-tinyscrollbar

A crossbrowser lightweight Javascript / jQuery scrollbar.

jquery-tinyscrollbar

Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website.

It comes in 2 flavours as a vanilla Javascript microlib and a jQuery plugin. The jQuery plugin does not need any other external libraries like jQuery Ui.

Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.

Features

• Completely rewritten!
• IOS and Android support.
• Available as a jQuery plugin and as a vanilla Javascript microlib.
• AMD, Node, requirejs and commonjs support.
• Can scroll vertical or horizontal
• Supports scrolling by wheel, thumb, track or touch.
• It has a update function so it can handle (async) content changes.
• Size of the track and thumb can be set to auto or a fixed number
• Easy customizable
• Supports normal scrolling and mobile style invert scrolling.
• Examples can be seen on this page, by downloading the zip or here
• Lightweight

Examples

The examples below are all for the jQuery Plugin. If you need some more (advanced) examples you can find them here. You can also find a example for the plain javascript library there.

Source

The latest source is available on GitHub.

License

Tinyscrollbar is a free script its licensed under the MIT license.

jquery-tinyscrollbar's Issues

Bug with video on tablet

if you put a div with scrollbar over a video tag, and that div has a transparent black background, appear a stripe with double background. I realized this only occurs on the tablet, and only when the content is moved.

I create a test url: http://www.ibiatec.com.br/clientes/scrollbug/

Selecting text when dragging

While dragging the scrollbar and moving around near content text, the text is selected.

The problem is because, in the events method you have to add 'return false;' at the end of them to prevent selecting as said in this link:

http://www.quirksmode.org/js/dragdrop.html

So, at the end of start, drag and end method I added this statement and it worked!

Hope you can improve this excellent plugin.

[]s sid

Scrollbar cannot be scrolled on touch devices

When using a touch device, scrolling can only be achieved by swiping the content itself. The scrollbar thumb does not respond to touch.

Tiny Scrollbar does not support touch devices with a mouse attached

Tiny Scrollbar prevents mouse drag interactions on touch devices because it seems to assume that a device is either a touch device or a mouse device but not both. Many devices that support touch also support mouse input, and large touch-enabled desktop computers are probably controlled primarily by a mouse.

It would be good if Tiny Scrollbar could support both touch and mouse events simultaneously.