Custom scroll bar plug-in

Click here to view the official address,

Mcustomscrollbar uses jquery UI, which allows you to flexibly define your scroll bar through CSS. Vertical and horizontal scroll bars can be defined at the same time, and the support for mouse scrolling is provided through Brandon Aaron jquery mouse-wheel plugin, you can also cache and scroll to make the scrolling smoother. You can automatically adjust the position of the scroll bar and define the scroll position. In short, you know it is very easy to use.

How to Use mcustomscrollbar

First, download the plug-in package provided by the author, which contains all plug-in 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 mcsb_buttons.png.

Step 1: load the style file of the plug-in.

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

Step 2: load necessary JS files.

The files to be loaded include jquery, jquery UI, jquery. mousewheel. Min. JS, and jquery. mcustomscrollbar. js. Jquery and jquery UI are required. jquery. mousewheel. Min. JS is used to provide rolling support. jquery. mcustomscrollbar. JS is the main file of the plug-in. Note that the loading sequence.

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 code at the bottom of the document to shorten the loading time of webpage content. The loaded code here uses Google's CDN acceleration service to obtain jquery and jquery UI, this has both advantages and disadvantages. The plug-in package contains jquery and jquery UI (this UI is simplified by the author and contains the modules required by this plug-in. The size is only 43kb ), of course, you can 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.

Step 3: Activate the plug-in for the content Block

<script>    (function($){        $(document).ready(function(){            $(".content").mCustomScrollbar();        });    })(jQuery);</script>

Step 4: add content and styles to the page

<Div class = "content"> <p> test data... a lot more </P> </div>

width:100px;height:100px;overflow:auto;

Jquery. mousewheel. Min. js: This is a great 2 kb plug-in compiled by Brandon Aaron. It targets all operating systems and browsers and provides support for mouse scroll events.

Jquery. mcustomscrollbar. js: This is the main file of our plug-in. You can find its compressed version in the minified of the plug-in package.

Jquery.mcustomscrollbar.css: This CSS file is used to define the sidebar. You can define your sidebar in this file. Of course, you can define it in other CSS files. Note that you must use the sequence in CSS, the priority relationship overwrites the definition in this file. Otherwise, it may be invalid.

Mcsb_buttons.png: This PNG image file contains buttons that scroll up to the left to the right. You can use the corresponding buttons in the image by using the CSS Sprites technology. The plug-in package contains the PSD source file (sources/mcsb_buttons.psd) for this image. You can customize it as needed.

After completing these steps, you can use the plug-in correctly and see the corresponding effect. However, no one is willing to use such a powerful plug-in to achieve this default effect. Next, let's look at the Advanced use.

Introduction to mcustomscrollbar Parameters

This plug-in has a huge number of functions, so there are many parameters, of course, more parameter values. When introducing parameters, I would like to introduce the writing methods of two parameter values for beginners, which are directly and merged.

Parameters Used by the plug-ins we usually use are directly followed by parameter values, which is intuitive and simple. In this plug-in, there are too many parameter values, so some parameters are merged and written. For example, the scrollbuttons parameter to be introduced below has four attributes: Enable, scrolltype, scrollspeed, and scrollamount. These four attributes also have their own values to implement corresponding functions. If other parameters are added, we should write as follows:

$("#main").mCustomScrollbar({ scrollButtons:{ enable:false, scrollType:"continuous", scrollSpeed:20, scrollAmount:40 }, horizontalScroll:false, });

Be sure to note the comma between Closed parentheses and statements. New users may fail to run the plug-in because they are not careful and do not strictly follow this rule. Okay. The following describes the detailed parameters.

Set_width: false |Set the width of your content to pixel or percentage
Set_height: false |Set the height of your content to pixel or percentage
Horizontalscroll: Boolean| Whether to create a horizontal scroll bar. By default, the vertical scroll bar value can be: true (create a horizontal scroll bar) or false
Scrollinertia: integer| The rolling inertia value can be zero in milliseconds without rolling inertia (rolling inertia can make the block rolling smoother)
Scrolleasing: String |View jquery UI easing for the scroll action type. All types are displayed.
Mousewheel: String/Boolean| Supported values for mouse scrolling: True. False. By default, the value of mouse scrolling is set to false to cancel the mouse scrolling function.
Mousewheelpixels: integer| The number of pixels to scroll in the mouse scroll is measured in pixels.
Autodraggerlength: Boolean |Automatically adjust the length of the scroll bar drag Block Based on the content area: True, false
Scrollbuttons: {enable: Boolean}| Whether to add buttons at both ends of the scroll bar. Supported values: true and false
Scrollbuttons: {scrolltype: string}| Rolling type value of the scroll button: "continuous" (intermittent scrolling when you click the scroll control button) "pixels" (rolling based on the number of clicks each time) Click here to see an example of the image
Scrollbuttons: {scrollspeed: integer}| Set the scroll speed when you click the scroll button (20 by default). Set a higher value to scroll faster.
Scrollbuttons: {scrollamount: integer}| Sets the default value pixel unit for each scroll when you click the scroll button. The default value is 40 pixels.
Advanced: {updateonbrowserresize: Boolean}| Adjust the size of the scroll bar on the browser based on the percentage: True, false, and false if your content block has been fixed
Advanced: {updateoncontentresize: Boolean}| Automatically adjust the size of the scroll bar based on the dynamically changed content: True, setting false to true will continuously check the length of the content and change the size of the scroll bar accordingly. It is recommended that you do not set it to true unless necessary. If there are many scroll bars on the page, it may cause extra removal. you can use the update method to replace this function.
Advanced: {autoexpandhorizontalscroll: Boolean}| Automatically expand the length of the horizontal scroll bar: True, false, set to true. You can adjust the size automatically based on the dynamic changes in the content. You can refer to the demo.
Advanced: {autoscrollonfocus: Boolean}| Whether to automatically scroll to an object in the focus. For example, if the form uses a jump focus value similar to the tab key, the value is true and false.
Callbacks: {onscrollstart: function (){}}| Use a custom callback function to execute the function at the beginning of the rolling time. For details, refer to the demo.
Callbacks: {onscroll: function () {}} |
The demo of the custom callback function is run in the scroll.
CAllbacks: {ontotalscroll: function (){}} | Call this UDF demo when scrolling to the bottom.
Callbacks: {ontotalscrollback: function (){}}| Call the demo of this custom callback function when you scroll to the top of the page.
Callbacks: {ontotalscroloffset: integer}| Sets the offset pixel unit to reach the top or bottom.
Callbacks: {whilescrolling: function (){}}| When the user is rolling, execute this custom callback function
Callbacks: {whilescrollinginterval: integer}| Sets the interval in milliseconds for calling 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  }

Mcustomscrollbar method 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, adding or removing an object through JavaScript, inserting a new content through Ajax, hiding or displaying a new content)

The following 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");});
After the new content is fully loaded or the animation is complete, the update method is always called.
Scrollto
Usage: $ (selector). mcustomscrollbar ("scrollto", position); you can use this method to automatically scroll to the position you want to scroll. You can use a string (for example, "# element-ID" or "bottom") to describe this position or a value (in pixel units ). The following example will scroll to the bottom object


$(".content").mCustomScrollbar("scrollTo","last");
Scrollto method parameters$ (Selector). mcustomscrollbar ("scrollto", string ); | Scroll to the position of an object. The string value can be the ID or class name.
$ (Selector). mcustomscrollbar ("scrollto", "top "); | Scroll to the top (vertical scroll bar)
$ (Selector). mcustomscrollbar ("scrollto", "bottom "); | Scroll to the bottom (vertical scroll bar)
$ (Selector). mcustomscrollbar ("scrollto", "left "); | Scroll to the leftmost (horizontal scroll bar)
$ (Selector). mcustomscrollbar ("scrollto", "right "); | Scroll to the rightmost (horizontal scroll bar
$ (Selector). mcustomscrollbar ("scrollto", "First "); | Scroll to the first object location in the content area
$ (Selector). mcustomscrollbar ("scrollto", "last "); | Scroll to the last object location in the content area
$ (Selector). mcustomscrollbar ("scrollto", integer );| Scroll to a certain position (in pixels)

Scrollto
The method has two additional option parameters.

Movedragger: Boolean| The unit of pixels from the slider of the scroll bar to a certain position. Values: True and flase. Example: $ (selector). mcustomscrollbar ("scrollto", 200, {movedragger: true });
Callback: Boolean |Run the callback function. After scroll-to is complete, the value is true and false, for example, $ (selector). mcustomscrollbar ("scrollto", 200, {callback: true });
Disable usage: $ (selector). mcustomscrollbar ("disable"); call the disable method to make the scroll bar unavailable. To make it available again, call the update method. The Disable method uses an optional parameter (the default value is false). You can set true if you want to re-scroll the content area when the scrollbar is unavailable. For example:

$(".content").mCustomScrollbar("disable",true);


See some disable examples.
Destroy
Usage: $ (selector). mcustomscrollbar ("destroy ");
Call the destroy method to remove the custom scroll bar of an object and restore the default style.
See some destroy examples.

How mcustomscrollbar works
Through the use of these plug-ins, The provisioner m also analyzes the implementation principles of these plug-ins. The principle is as follows:
First, obtain the content block of the scroll bar style to be modified, and then use CSS to hide the default scroll bar. Then, use JavaScript to add a lot of HTML structures, and then use CSS to make a scroll bar effect. Then, use CSS to define the scroll bar style, and use the scroll event of the corresponding JavaScript mouse to produce the scroll down effect.
After understanding this, let's take a look at the structure of the scroll bar and use CSS to define it.
Define the scroll bar appearance
First, let's take a look at the HTML structure of the scroll bar. below is 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>
The mcsb_buttonup and mcsb_buttondown labels are available only when scroll buttons is enabled. 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>
After knowing this, we can define the scroll bar style. 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 .mCSB_dragger .mCSB_dragger_bar{    /* 3rd scrollbar dragger style... */}
In order to more intuitively see the scroll bar area to be defined, the official team provides a very vivid image.


More advanced usage: Modify the browser's scroll bar
Simply modifying the sidebar of a content area cannot meet our needs. What should we do if we want to modify the browser sidebar? Of course, this cannot be implemented using JavaScript, because the browser is a container and JavaScript is the code in the container. How can we modify the container? Of course, if there is a problem, there must be a solution. To solve this problem, a browser window is virtualized.
We first add a div block, then add the position: absolute attribute to the DIV, and then we can specify its width and height as 100% or a slightly smaller 98%. In this way, the DIV is expanded to the entire browser interface, which can be regarded as the body of a webpage. Add overflow: auto to make it exceed the threshold and the scroll bar appears automatically. In this way, you can simulate the effect of modifying the browser scroll bar.
For more advanced usage and skills, please feel free to contact me. You can also follow this article and will be added later.