jquery scroll bar Style plug-in Mcustomscrollbar usage introduction

About Mcustomscrollbar
Mcustomscrollbar is a custom scrollbar plug-in based on the JQuery UI that allows you to flexibly define a page's scroll bar, and the vertical and horizontal scroll bars can be defined in two directions, and it passes through Brandon Aaron JQuery Mouse-wheel plugin provides support for mouse scrolling, and in the process of scrolling, you can also buffer scrolling to make scrolling smoother, and automatically adjust the position of the scroll bar and define where to scroll. Anyway, you know, it's very handy,:-).

Download

How to use Mcustomscrollbar
Mcustomscrollbar This plugin's download package contains all the plugin files and some examples. The following four files must be uploaded to the server:

Jquery.mCustomScrollbar.js
Jquery.mousewheel.min.js
Jquery.mCustomScrollbar.css
Mcsb_buttons.png
First step: Load the Mcustomscrollbar style file.

Use the following code to introduce the JQUERY.MCUSTOMSCROLLBAR.CSS style sheet file in the plug-in package.

<link href= "Jquery.mCustomScrollbar.css" rel= "stylesheet" type= "Text/css"/>
Step two: Load the necessary JS file.

There are several files that need to be loaded: jquery, jquery UI, Jquery.mousewheel.min.js and Jquery.mCustomScrollbar.js four.

The jquery and jquery UI is required, jquery.mousewheel.min.js is used to provide scrolling support, and Jquery.mCustomScrollbar.js is the main file for Plug-ins.

* Note: The order of loading is also in the order of the code above, which may cause failure if you do not pay attention to the order of loading.

<script src= "Http://ajax.useso.com/ajax/libs/jquery/1.7/jquery.min.js" ></script>
<script src= "Http://ajax.useso.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
<script src= "Jquery.mousewheel.min.js" ></script>
<script src= "Jquery.mCustomScrollbar.js" ></script>
You can put this code at the bottom of the document to shorten the time it took to load the page content. Google's CDN Acceleration service is used to load the jquery and jquery UI, but you can also upload the two libraries to your server. Also note that the JQuery UI plugin has been streamlined by the author, containing only the modules required by the plugin, and only 43KB in size.

If you are using the accelerated service of a common Javascript library similar to Google or Sina, it is recommended that the following fallback be used, and that if the Javascript code for CDN is not successfully loaded, the local library will be referenced without causing the plugin to be unusable. ：

<script src= "Http://ajax.useso.com/ajax/libs/jquery/1.7/jquery.min.js" ></script>
<script>!window.jquery &amp;&amp; document.write (unescape ('%3cscript src= ' jquery/jquery-1.7.2.min.js "%3e%3c/script%3e ')) </script>

<script src= "Http://ajax.useso.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
<script>!window.jquery.ui &amp;&amp; document.write (unescape ('%3cscript src= ' jquery/jquery-ui-1.8.21.custom.min.js '%3e%3c/script%3e ')) </script >
Step Three: Apply Mcustomscrollbar

<script type= ' Text/javascript ' >
(function ($) {
$ (window). Load (function () {
$ (". Content"). Mcustomscrollbar ();
});
}) (JQuery);
</script>

Here I use (function ($) {...}) (jquery); to wrap the jquery code in order to avoid conflict. I also used window load ($ (window). Load ()) To activate my plug-in functionality, because it would allow me to load my plugin after all the page objects were loaded. Of course, you can also use the regular JQuery code loading method, but you need to understand the difference between the ready and the Load method. The general JQuery code loading method is as follows:

<script type= ' Text/javascript ' >
(function ($) {
$ (document). Ready (function () {
$ (". Content"). Mcustomscrollbar ();
});
}) (JQuery);
</script>
Fourth step: Add content and Mcustomscrollbar style to the page

No content, of course, is not the effect of this plugin. For the example code above, we should define a block of content in the page that has a class. and add some test data:

<div>
<p> test data .... There's a lot more </p>
</div>
This is certainly not the end of the custom scroll bar style, you must have a scroll bar, so we also want to add some CSS to this block to let it appear scroll bar, otherwise it is ineffective. The addition of the style is very simple, that is, define a width or height or width is defined, and then define a overflow value of auto. This will cause a scroll bar to appear if the content exceeds the specified width. Cases:

Width:100px;height:100px;overflow:auto;

After you do this, the scroll bar of the content block with the scroll bar becomes the default style for this plugin.

The official default style is not high compared to white, so I added a darker background color to show the obvious.

Of course, there are many parameters to open the function of extension plug-ins, the use of these parameters to speak later. First of all, the use of these files and a brief introduction:

JQuery: The prerequisite library for this plugin, you know.
jquery UI: Expands the jquery library and provides simple animation and drag for our scroll bars.
Jquery.mousewheel.min.js: This is a great 2kb plugin written by Aaron Brandon, which is designed for all operating systems and browsers, providing support for the mouse scrolling events.
Jquery.mCustomScrollbar.js: This is our plugin master file. In the plug-in package minified you can find its compressed version.
JQUERY.MCUSTOMSCROLLBAR.CSS: This CSS file is for us to define the sidebar. You can define your sidebar in this file, and of course you can define it in other CSS files, and note that you have to overwrite the definition in this file with the order in the CSS, the precedence relationship.
Mcsb_buttons.png: This PNG picture file contains a button that scrolls up and down to the right. You can use the CSS sprites technique to use the corresponding buttons in this picture. The plug-in package contains the PSD source file (SOURCES/MCSB_BUTTONS.PSD) for this image, and you can customize it according to your own requirements.
To do this, you can already use the plugin correctly and see the corresponding effect. But no one is willing to use such a powerful plug-in to achieve this default effect, the following is the use of advanced.

Introduction to the parameters of Mcustomscrollbar
Mcustomscrollbar the function of this plug-in is huge, so there are many parameters, the parameter value of course more. In introducing the parameters, I would like to first introduce the two parameter values to the novice, respectively, direct and merged.

We usually contact the plug-in parameters, are directly followed by parameters to write parameter values, this more intuitive simple. In this plugin, there are too many parameter values, so combine some of the parameters to write. For example, the following scrollbuttons this parameter, it has four sub properties: Enable, Scrolltype, Scrollspeed, ScrollAmount, these four properties also have their own values, to achieve the corresponding function. If you add other parameters, then we should write this:

$ ("#main"). Mcustomscrollbar ({
scrollbuttons:{
Enable:false,
Scrolltype: "Continuous",
SCROLLSPEED:20,
Scrollamount:40
},
Horizontalscroll:false,
});
Be sure to note the comma between the closing brackets and the statements, and the novice may not be able to run the plugin because it is careless and not strictly written in accordance with this rule. OK, let's introduce the detailed parameters below.

Set_width:false: Set the width of your content can be pixels or percentages
Set_height:false: Set the height value of your content can be pixel or percent
Horizontalscroll:boolean: Create a horizontal scroll bar the default is to have a vertical scrollbar value of: true (create a horizontal scroll bar) or false
Scrollinertia:integer: Scrolling inertia value in milliseconds using 0 can be without rolling inertia (scrolling inertia can make the block scrolling more smooth)
Scrolleasing:string: Scrolling action type
Mousewheel:string/boolean: Mouse scrolling support values are: true.false, pixels by default mouse scrolling set to pixel value fill false cancel mouse scrolling function
Mousewheelpixels:integer: The number of pixels scrolled in the mouse scroll is a value in pixels
Autodraggerlength:boolean: Automatically adjusts the length value of the scrollbar drag block according to the content area: True,false
scrollbuttons:{Enable:boolean}: Do you want to add a scroll bar at both ends button support value: True,false
scrollbuttons:{scrolltype:string}: Scrolling button scrolling Type value: "Continuous" (when you click the Scrolling control button on and off) "Pixels" (scroll according to the number of pixels per click)
scrollbuttons:{Scrollspeed:integer}: Set the scrolling speed (default 20) when clicking the scroll button to set a higher number to scroll faster
scrollbuttons:{Scrollamount:integer}: Set click the scroll button to scroll every time the value of the pixel unit default 40 pixels
advanced:{Updateonbrowserresize:boolean}: Adjusts the size of the scroll bars on the browser for adaptive layouts based on percentages: True,false set False if your content block has been fixed size
advanced:{Updateoncontentresize:boolean}: Automatically adjusts the scroll bar size value based on the content of the dynamic transform: True,false set to True will constantly check the length of the content and change the scrollbar size accordingly It is recommended that you do not set it to true unless it is necessary you can use the Update method to override this feature if there are many scroll bars in the page.
advanced:{Autoexpandhorizontalscroll:boolean}: Automatically expands the length value of the horizontal scroll bar: True,false Set true You can resize automatically depending on the dynamic change of the content
advanced:{Autoscrollonfocus:boolean}: Whether to automatically scroll to objects in focus such as forms use the TAB key to jump Focus values: true False
callbacks:{onscrollstart:function () {}}: Use a custom callback function to execute at the start of a scrolling time
callbacks:{onscroll:function () {}}: Custom callback function to perform Demo-ibid. in scrolling
callbacks:{ontotalscroll:function () {}}: Call this custom callback function when scrolling to the bottom of the section Demo-ditto
callbacks:{ontotalscrollback:function () {}}: Call this custom callback function when scrolling to the top Demo ditto
callbacks:{Ontotalscrolloffset:integer}: Sets the offset pixel unit at the top or bottom
callbacks:{whilescrolling:function () {}}: Executes this custom callback function when the user is scrolling
callbacks:{Whilescrollinginterval:integer}: Set the time interval millisecond unit to invoke the whilescrolling callback function

The following is a list of all parameters and their default values

$ (". Content"). Mcustomscrollbar ({
Set_width:false,
Set_height:false,
Horizontalscroll:false,
SCROLLINERTIA:550,
Scrolleasing: "Easeoutcirc",
MouseWheel: "Auto",
Autodraggerlength:true,
scrollbuttons:{
Enable:false,
Scrolltype: "Continuous",
SCROLLSPEED:20,
Scrollamount:40
},
advanced:{
Updateonbrowserresize:true,
Updateoncontentresize:false,
Autoexpandhorizontalscroll:false,
Autoscrollonfocus:true
},
callbacks:{
Onscrollstart:function () {},
Onscroll:function () {},
Ontotalscroll:function () {},
Ontotalscrollback:function () {},
ontotalscrolloffset:0,
Whilescrolling:false,
Whilescrollinginterval:30
}
});
How to use Mcustomscrollbar
Update

Usage: $ (selector). Mcustomscrollbar ("Update");

Call the Update method of the Mcustomscrollbar function to update the scroll bar in real time when the content changes (for example, by adding or removing an object via Javascript, inserting a new piece of content via Ajax, hiding or displaying a new content, etc.)

Here is an example:

$ (". Content. Mcsb_container"). Append ("<p>new content here...</p>");
$ (". Content"). Mcustomscrollbar ("Update");

$ (". Content. Myimagescontainer"). Append (" ')";
$ (". Content. Myimagescontainer img"). Load (function () {
$ (". Content"). Mcustomscrollbar ("Update");
});

$ ("#content-1"). Animate ({height:800}, "Slow", function () {
$ (this). Mcustomscrollbar ("Update");
});
The Update method is always invoked when the new content is fully loaded or the animation completes.

Scrollto

Usage: $ (selector). Mcustomscrollbar ("Scrollto", position);

You can use this method to automatically scroll to the position you want to scroll to. This location can be described by using strings (such as "#element-id", "bottom", and so on) or as a number (pixel units). The following example will scroll to the bottom of the object

$ (". Content"). Mcustomscrollbar ("Scrollto", "last");
Parameters of the Scrollto method

$ (selector). Mcustomscrollbar ("Scrollto", String);: Scroll to the position of an object, string value can be ID or class name
$ (selector). Mcustomscrollbar ("Scrollto", "Top");: Scroll up (vertical scroll bar)
$ (selector). Mcustomscrollbar ("Scrollto", "Bottom");: Scrolling to the bottom (vertical scroll bar)
$ (selector). Mcustomscrollbar ("Scrollto", "Left");: Scroll to leftmost (horizontal scroll bar)
$ (selector). Mcustomscrollbar ("Scrollto", "right");: Scroll to the rightmost (horizontal scroll bar
$ (selector). Mcustomscrollbar ("Scrollto", "first");: Scroll to the position of object one in the content area
$ (selector). Mcustomscrollbar ("Scrollto", "last");: Scroll to the final object position in the content area
$ (selector). Mcustomscrollbar ("Scrollto", Integer);: Scrolling to a location (in units of pixels)
The Scrollto method also has two additional option parameters

Movedragger:boolean: The slider of the scroll bar to a location pixel unit, value: True,flase. For example: $ (selector). Mcustomscrollbar ("Scrollto", 200,{movedragger:true});
Callback:boolean: Execute the callback function when the scroll-to is complete, the value: True,false For example: $ (selector). Mcustomscrollbar ("Scrollto", 200,{callback: true});
Disable

Usage: $ (selector). Mcustomscrollbar ("Disable");

Call the Disable method to make the scroll bar unavailable. If you want to make it available again, call the Update method. The Disable method uses an optional parameter (the default false) you can set true if you want to reset the content area when ScrollBar is not available. For example:

$ (". Content"). Mcustomscrollbar ("Disable", true);
Destroy

Usage: $ (selector). Mcustomscrollbar ("destroy");

Call the Destroy method to remove a custom scroll bar for an object and restore the default style

The principle of Mcustomscrollbar
Through the use of these plug-ins by stalkers m, the implementation principle of these plug-ins is also analyzed. The principle is this:

First get the content block that you want to modify the scroll bar style, and then use CSS to hide the default scroll bar, and then use Javascript to add a lot of HTML structure, and then with CSS to make a scroll bar effect. Then use CSS to define the style of the scroll bar, using Javascript corresponding mouse scrolling events, resulting in rolling down the effect.

With that in mind, let's look at the structure of the scroll bar and then define it using CSS.

Define scroll bar appearance

To understand the HTML structure of the ScrollBar, here is the default vertical scroll bar structure:

<div class= "content Mcustomscrollbar _mcs_1" >
<div class= "Mcustomscrollbox" >
<div class= "Mcsb_container" >
<!--your long content ...-->
</div>
<div class= "Mcsb_scrolltools" >
<a class= "Mcsb_buttonup" ></a>
<div class= "Mcsb_draggercontainer" >
<div class= "Mcsb_dragger ui-draggable" >
<div class= "Mcsb_dragger_bar" ></div>
</div>
<div class= "Mcsb_draggerrail" ></div>
</div>
<a class= "Mcsb_buttondown" ></a>
</div>
</div>
</div>

Mcsb_buttonup and Mcsb_buttondown These two a tags are available only if you have enabled the scroll buttons feature. The following structure is the structure of the horizontal scroll bar:

<div class= "Mcustomscrollbox mcsb_horizontal" >
<div class= "Mcsb_container" >
<!--your long content ...-->
</div>
<div class= "Mcsb_scrolltools" >
<a class= "Mcsb_buttonleft" ></a>
<div class= "Mcsb_draggercontainer" >
<div class= "Mcsb_dragger ui-draggable" >
<div class= "Mcsb_dragger_bar" ></div>
</div>
<div class= "Mcsb_draggerrail" ></div>
</div>
<a class= "Mcsb_buttonright" ></a>
</div>
</div>
</div>

Knowing this, we can define the scrollbar style, and for multiple scrollbars on the same page, the official recommends the following:

. _mcs_1. Mcsb_scrolltools. Mcsb_dragger. mcsb_dragger_bar{
/* 1st scrollbar Dragger Style ... * *
}
. _mcs_2. Mcsb_scrolltools. Mcsb_dragger. mcsb_dragger_bar{
/* 2nd scrollbar dragger Style ... * *
}
. _mcs_3. Mcsb_scrolltools. Mcsb_dragger. mcsb_dragger_bar{
/* 3rd scrollbar dragger Style ... * *
}

To get a more intuitive view of the scrollbar area to be defined, the official gave a very vivid picture.

Based on this picture, you can easily define the style of the scroll bar.

More advanced use: Modify the browser's scroll bar
The only way to modify a content area of the sidebar is not enough to meet our needs, we also want to modify the browser sidebar should do? This is of course not possible with JavaScript, because the browser is a container, JavaScript is the code inside the container, how can the container modified it? Of course, there must be a solution to the problem. Faced with this problem, the solution is very simple, is the virtual out of a browser window.

We first add a div block, then add the Position:absolute attribute to the Div, and then we can specify its width and height of 100% or a little bit of 98%. In this way, the DIV is extended to the entire browser interface so that it can be used as the body of a Web page. Then add Overflow:auto to let it go beyond the automatic scroll bar. This will simulate the effect of modifying the browser scroll bar.