JQuery custom Web page scroll bar style plug-in Mcustomscrollbar introduction and how to use

The system default scroll bar style, really has seen enough disgusting. Imagine how awkward it would be to have a default scroll bar style in a system on a very distinctive and creative Web page. In order to define the scroll bar in the Web page method, I really have been looking for a long time, on the current search results, found two more good JQuery plugin: JScrollPane and Mcustomscrollbar. About the former, you may have seen more, but this plugin is too old and the function is not strong. The effect was very good a few years ago, but it's not easy to say now. So I chose the latter: Mcustomscrollbar. is a simple comparison of the official examples of both:

This article is about how to use this plugin, most of the content is based on the official Mcustomscrollbar page to do a translation, but the part of the content to modify, while adding some of their own in the use of some skills.

About Mcustomscrollbar

Mcustomscrollbar uses the JQuery UI to define your scroll bar flexibly through CSS. Both vertical and horizontal scroll bars can be defined, and the Brandon Aaron jquery Mouse-wheel plugin provides support for mouse scrolling, which in the process of scrolling can also cushion scrolling to make scrolling smoother. You can automatically adjust the position of the scroll bar and define where you scroll to, and so on. Anyway, you know it's good to use.

Click here to download this Mcustomscrollbar

Click here to view the demo of this Mcustomscrollbar

How to use Mcustomscrollbar

First, please download the plugin package provided by the author, which contains all the plugin files and some examples. The following four files must be uploaded to your server: Jquery.mCustomScrollbar.js, Jquery.mousewheel.min.js, Jquery.mCustomScrollbar.css and Mcsbbuttons.png. _

First step: Load the plugin's style file.

You can use the following code to introduce a JQUERY.MCUSTOMSCROLLBAR.CSS style sheet file in a plug-in package.

<link href= "Jquery.mCustomScrollbar.css" rel= "stylesheet" type= "Text/css"/>

* * Step two: Load the necessary JS files. * * There are several files that need to be loaded: jquery, jquery UI, Jquery.mousewheel.min.js and Jquery.mCustomScrollbar.js. jquery and jquery UI is required, jquery.mousewheel.min.js is used to provide scrolling support, and Jquery.mCustomScrollbar.js is the main file of the plugin. Note that the load order is also to follow the above, if you do not pay attention to the order of loading, may lead to failure, for reasons please see my: [The Order of the Code in the page is not negligible details] (http://www.qianxingzhem.com/post-1539.html). You can use the following code to load:

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" ></script><script src= "Http://ajax.googleapis.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 piece of code at the bottom of the document to shorten the time it takes to load the page, as can be seen in the article described above. The load code here uses Google's CDN accelerator to get the jquery and jquery UI, which is good and bad. In the plug-in package, which contains the jquery and jquery UI (the UI is streamlined by the author, the module that contains the plugin must be only 43KB in size), you can of course upload the two libraries in the plug-in package to the server for use. They are in the jquery directory of the plug-in package. If you're using the accelerator for a common Javascript library like Google or Sina, here's what to do (take Google for example):

<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" ></script><script> !window.jquery && document.write (unescape ('%3cscript src= ' jquery/jquery-1.7.2.min.js '%3E%3C/script%3E ')) </script><script src= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></ Script><script>!window.jquery.ui && document.write (unescape ('%3cscript src= ' jquery/ Jquery-ui-1.8.21.custom.min.js "%3e%3c/script%3e") </script>

If this is done, it will make a judgment after the library is loaded: * * If the library is not successfully loaded, a new Javascript reference code is generated to refer to the local file * *. This way, if the outside library is not available, the local library is loaded without causing the plug-in to be unusable. Recommend this notation. * * Step three: Activate this plugin for content blocks * *

<script>    (function ($) {        $ (window). Load (function () {            $ (". Content"). Mcustomscrollbar ();        });    }) (jQuery);</script>

Here I used (function ($) {...}) (jquery), to wrap jquery code, in order to avoid conflicts between jquery and other libraries in use. I also used window load (window). Load ()) To activate my plug-in functionality, as this would ensure that my plugin was loaded after the page object was loaded. Of course, you can also use the usual JQuery code loading method, but you need to understand the difference between the ready and the load methods. The general JQuery code loading method is as follows:

<script>    (function ($) {        $ (document). Ready (function () {            $ (". Content"). Mcustomscrollbar ();        });    }) (jQuery);</script>

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

<div class= ". Content" >    <p> Test Data .... There's a lot more </p></div>

This is certainly not complete, * * Custom scroll bar style, you must have a scroll bar to be * *. So we have to add some CSS to this block to make it appear scrollbars, otherwise it is not effective. The added style is simple, defining a wide or high or wide definition, and then defining a overflow value of auto. This causes a scroll bar to appear if the content exceeds the specified width height. Cases:

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

After doing this, the scroll bar of the content block with the scrollbar becomes the default style for the plugin. [! [after use of Mcustomscrollbar] (http://qxzm-img.b0.upaiyun.com/blog/2012/12/1602/scroll2.png "scroll")] (http://qxzm-img.b0.upaiyun.com/blog/2012/12/1602/scroll2.png) The official default style is less contrast to white, so I added a darker background color to show the obvious. Of course, there are many parameters to open the function of the extension plug-ins, the use of these parameters later. First of all, the use of these files and brief introduction: **jquery**: This plugin of the necessary library, you understand. **jquery ui**: Extend the JQuery library and provide a simple animation and drag function for our scroll bar. **jquery.mousewheel.min.js**: This is a great 2kb plugin written by [Brandon Aaron] (http://brandonaaron.net), it's for all operating systems and browsers, gives us support for mouse scrolling events. **jquery.mcustomscrollbar.js**: This is our plugin master file. In the minified of the plugin package you can find it in a 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 be aware that you want to overwrite the definition in this file with the order of precedence in the CSS. Otherwise it might be invalid, for the code order in the Web page, see [Sneak M] (http://www.qianxingzhem.com) in this article: [The Order of the Code in the page is a non-negligible detail] (http:// www.qianxingzhem.com/post-1539.html). **mcsb_buttons.png**: This PNG image file contains buttons that scroll up and down to the left. You can use CSS sprites technology to use the corresponding buttons in this image. The plugin package contains this image of the PSD source file (SOURCES/MCSB_BUTTONS.PSD), which you can customize according to your own needs. Complete these, you can already use this plugin correctly, and see the correspondingEffect. But no one wants to use such a powerful plugin to achieve this default effect, the following is the use of advanced. # # Mcustomscrollbar Parameters introduce the function of this plug-in is huge, so there are many parameters, the parameter value of course more. In the introduction of parameters, I would like to introduce the two types of parameter values for beginners, respectively, are direct and merge. Our usual contact with the plug-in parameters, are directly followed by parameters to write the parameter values, this is more intuitive and simple. In this plugin, the parameter values are too many, so some parameters are combined to write. For example, the Scrollbuttons parameter, which is described below, has four properties: Enable, Scrolltype, Scrollspeed, ScrollAmount, and these four properties have their own values to implement the corresponding functions. If we add other parameters, we should write this:

 $ ("#main"). Mcustomscrollbar ({scrollbuttons:{enable:false, Scrolltype: "Continuous", scrollspeed:20, SCROLLAMOUNT:40}, Horizontalscroll:false,}); 

Be sure to pay attention to the comma between the closed parentheses and the statement, and the novice may not be able to run because of the careless, not strictly written according to this rule. OK, let's describe the detailed parameters below. * **set_width:false** | Set the width value of your content to be either pixel or percent * **set_height:false** | Setting your content's height value can be either pixel or percent * **horizontalscroll:boolean** | Whether to create a horizontal scroll bar by default is a vertical scroll bar value that is true (creates a horizontal scrollbar) or false * **scrollinertia:integer** | Scrolling inertia value in milliseconds using 0 can be no scrolling inertia (rolling inertia can make chunk scrolling smoother) * **scrolleasing:string** | Scroll action type view [jquery UI easing] (http://view.jqueryui.com/formcontrols/demos/effect/easing.html) to see all types * **mousewheel : string/boolean** | Supported values for mouse scrolling are: true.false, pixel 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 the value in pixels * **autodraggerlength:boolean** | Automatically adjust the length value of the scrollbar by the content area: True,false * **scrollbuttons:{Enable:boolean}** | Add scroll bar support values for both buttons: True,false * **scrollbuttons:{scrolltype:string}** | Scroll button scrolling Type value: "Continuous" (intermittent scrolling when you click on the Scroll control button) "Pixels" (scrolling based on the number of pixels per click) [Click here to see an example of the image] (http://manos.malihu.gr/tuts/ custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html) * **scrollbuttons:{ScrollSpeed:Integer} ** | SetScroll speed (default 20) set a higher value to scroll faster when clicking the scroll button * **scrollbuttons:{scrollamount:integer}** | Set the number of pixels per scroll when you click the scroll button by default 40 pixels * **advanced:{Updateonbrowserresize:boolean}** | Adjusts the size value of the scrollbar on the browser based on the percentage for the adaptive layout: True,false set False if your content block has been fixed size * **advanced:{Updateoncontentresize:boolean}** | Automatically adjusts the size value of the scroll bar according to 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, unless it is necessary to set it to true if there are many scrollbars in the page, it is possible to generate extra emigration you can use Update method to replace this function * **advanced:{Autoexpandhorizontalscroll:boolean}** | Automatically expands the length value of the horizontal scrollbar: True,false Set true You can automatically resize the content based on the dynamic changes [can see demo] (http://manos.malihu.gr/tuts/custom-scrollbar-plugin/ complete_examples.html) * **advanced:{Autoscrollonfocus:boolean}** | Whether to automatically scroll to an object in focus for example, a form jumps to a focus value using a tab-like key: true false * **callbacks:{onscrollstart:function () {}}** | Use a custom callback function to execute when the scrolling time starts [see demo] (http://manos.malihu.gr/tuts/custom-scrollbar-plugin/callbacks_example.html) * * *callbacks:{onscroll:function () {}}** | The custom callback function executes the Demo in the scroll. * **callbacks:{ontotalscroll:function () {}}** | Call this custom callback function when scrolling to the bottom of the unit DeMo Ibid. * **callbacks:{ontotalscrollback:function () {}}** | Call this custom callback function when scrolling to the top of the Demo * **callbacks:{Ontotalscrolloffset:integer}** | Sets the offset to the top or bottom of the pixel unit * **callbacks:{whilescrolling:function () {}}** | Execute this custom callback function when the user is scrolling * **callbacks:{Whilescrollinginterval:integer}** | Set the time interval for calling the whilescrolling callback function millisecond units 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  }

Mcustomscrollbar Method Update

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

Call the Update method of the Mcustomscrollbar function to update the scrollbar in real time when the content changes (such as adding or removing an object via Javascript, inserting a new piece of content through 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-1"). Animate ({height:800}, "Slow", function () {  $ (this). Mcustomscrollbar ("Update");});

The Update method is always called when the new content is fully loaded or the animation is complete.
ScrollTo
Usage: $ (selector). Mcustomscrollbar ("ScrollTo", position);
You can use this method to scroll automatically to where you want to scroll. This position can use a string (such as "#element-id", "bottom", etc.) to describe or be a numeric value (in 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, the value of the string can be either an ID or a class name
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", "top"); | Scroll to top (vertical scroll bar)
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", "bottom"); | Scroll to the bottom (vertical scroll bar)
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", "left"); | Scroll to the far left (horizontal scroll bar)
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", "right"); | Scroll to the far right (horizontal scroll bar
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", "first"); | Scroll to the first object position in the content area
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", "last"); | Scroll to the last object position in the content area
 
   
$ (selector). Mcustomscrollbar ("ScrollTo", Integer); | Scroll to a location (pixel units)
The ScrollTo method also has two additional option parameters
 
  
 
 
Movedragger:boolean | Scroll the slider of the scrollbar to a location pixel unit, value: True,flase. For example: $ (selector). Mcustomscrollbar ("ScrollTo", 200,{movedragger:true});
Callback:boolean | Executes the callback function when 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 (default false) you can set true if you want to re-enable the content area to scroll when ScrollBar is not available. For example:
$ (". Content"). Mcustomscrollbar ("Disable", true);

You can see some examples of using disable
Destroy
Usage: $ (selector). Mcustomscrollbar ("destroy");
Call the Destroy method to remove the custom scroll bar for an object and restore the default style
You can see some examples of using destroy
The principle of Mcustomscrollbar
The implementation principles of these plugins are also analyzed by the use of these plugins by rogue M. The principle is this:
First get the content chunk to modify the scrollbar style, 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 a scrolling decline effect.
With this in mind, we can look at the structure of the scrollbar and then define it using CSS.
To define the appearance of a scroll bar
Let's look at the HTML structure of the scroll bar, and here's the default vertical scroll bar structure:
<div class= "content Mcustomscrollbar _mcs_1" >  <div class= "Mcustomscrollbox" >    <div class= " Mcsb_container ">      <!-your Long content here...->    </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 only available when you enable the scroll buttons feature. The following structure is the structure of the horizontal scroll bar:
<div class= "content Mcustomscrollbar _mcs_1" >  <div class= "Mcustomscrollbox mcsb_horizontal" >    <div class= "Mcsb_container" >      <!-your Long content here...->    </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 scroll bars on the same page, the official recommendation is as follows:
. _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 Dragger. mcsb_dragger_bar{    /3rd scrollbar Dragger style .../}

In order to see the scroll bar area to be defined more intuitively, the official gives a very image of the picture
According to this picture, it is easy to define the style of the scroll bar.
More advanced use to modify the browser's scroll bar
Just modifying the sidebar of a content area is not enough to meet our needs, and what do we want to do to change the browser sidebar? This is certainly not possible with JavaScript, because the browser is a container, JavaScript is the code inside the container, how can you change the container? Of course, there must be a solution to the problem. Faced with this problem, the solution is simple, is virtual out of a browser window.
We add a div block first, then add the Position:absolute property to the Div, and then we can specify its width and height at 100% or a slightly smaller 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 auto-occurrence scroll bar. This allows you to simulate the effect of modifying the browser scroll bar.
For more advanced use and skills, welcome to communicate with me, you can also focus on this article, will be added in the following.
JQuery custom Web page scroll bar style plug-in Mcustomscrollbar introduction and how to use