Its a simple, fast, lightweight (~2kB) plugin for jQuery 1.7+
that allows to control bar view using css.
+ Supporting touch, wheel, middle button and any kind of scrolling
+ As fast as native
+ Weight incredible small
+ Tested with IE7+, mobile and modern browsers
To init custom-scroll, include files on your page, and init on desired elements
- <!-- Custom-scroll CSS -->
- <link rel="stylesheet" href="css/jquery.custom-scroll.css">
-
- <!-- jQuery 1.7.0+ -->
- <script src="js/jquery.js"></script>
-
- <!-- Custom-scroll JS -->
- <script src="js/jquery.custom-scroll.js"></script>
- //Custom-scroll init example
- $('#example').customScroll();
There is some options you may need:
- // Full list of options with default values
- // All options are optional
- $('#example').customScroll({
- prefix: 'custom-scroll_',
-
- /* vertical */
- barMinHeight: 10,
- offsetTop: 0,
- offsetBottom: 0,
- /* will be added to offsetBottom in case of horizontal scroll */
- trackWidth: 10,
-
- /* horizontal */
- barMinWidth: 10,
- offsetLeft: 0,
- offsetRight: 0,
- /* will be added to offsetRight in case of vertical scroll */
- trackHeight: 10,
-
- /* each bar will have custom-scroll_bar-x or y class */
- barHtml: '<div />',
-
- /* both vertical or horizontal bar can be disabled */
- vertical: true,
- horizontal: true
- });
-
-
- // To recalculate bar position use same method without options
- $('#example').customScroll();
-
-
- // If you need to remove custom-scroll there is 'destroy' method
- $('#example').customScroll('destroy');
-
-
- // To change/get default options use
- $.fn.customScroll(someOptions);
After you init custom-scroll, it adds class to container, and makes new inner and bar
If there is already elements with those classes, they will be used
- <!-- before -->
- <div>
- ...
- </div>
-
- <!-- after: adds class -->
- <div class="custom-scroll_container">
-
- <!-- adds inner -->
- <div class="custom-scroll_inner">
- ...
- </div>
-
- <!-- adds barHtml from options with class -->
- <div class="custom-scroll_bar"></div>
- <div class="custom-scroll_bar-x"></div>
- </div>
Init custom-scroll to see demo
Sed do eiusmod tempor incididunt. Duis aute irure dolor in reprehenderit, sed ut perspiciatis.
Ut aliquip ex ea commodo consequat. Sed ut perspiciatis. Explicabo, et quasi architecto beatae vitae dicta sunt.
Ut aliquip ex ea commodo consequat, neque porro quisquam est, accusantium doloremque laudantium, nemo enim ipsam voluptatem.
Sunt in culpa qui officia. Sed do eiusmod tempor incididunt, nemo enim ipsam voluptatem.
In voluptate velit esse cillum dolore, consectetur adipisicing elit, unde omnis iste natus error sit voluptatem.
Sunt in culpa qui officia, nemo enim ipsam voluptatem, aspernatur aut odit aut fugit, duis aute irure dolor in reprehenderit, sed ut perspiciatis.
Quia voluptas sit. Quia voluptas sit, excepteur sint occaecat cupidatat non proident, ut labore et dolore magna aliqua, explicabo.
sed do eiusmod tempor incididunt, unde omnis iste natus error sit voluptatem, in voluptate velit esse cillum dolore
In voluptate velit esse cillum dolore, consectetur adipisicing elit, unde omnis iste natus error sit voluptatem.
Sed do eiusmod tempor incididunt. Duis aute irure dolor in reprehenderit, sed ut perspiciatis.
Customize scroll any way you want using CSS
Native
Just to compare
Usable with textarea either
1. Hidden element should be inited right after it will be shown. Since its not possible to properly count all dimensions of hidden elements
2. Max-height works fine, if you dont use horizontal scroll
3. Avoid using padding-top and padding-bottom for scrolling container. May have glitches.
Custom-scroll is listening the scroll event at inner element, so you can use
jQuery scrollTop method to control position.
That will help if you want more advanced scroll like in example below