Tutorial On How Make a Custom Scrollbar

well, First of all sorry for my bad english, i wanted to share my knowlege on this and i tried my best to say it in easyest way, So let's begin:

1- Download Custom Scrollbar File.

    This file have all JS files with a CSS file that makes or Scrollbar custom and CustomScrollbar.an file as an example

2- you just put these files in your project folder like pictures below

3- then goto stage > compositionReady and write these codes without any changes :

    ( i don't know why but any changes would make your project freez !! )

         yepnope({nope:[ 'jquery.mCustomScrollbar.css',

                                      'jquery.mousewheel.min.js',

                                      'jquery.mCustomScrollbar.js',

                                      'jquery-ui-1.8.21.custom.min.js',

                                      'jquery-1.8.3.min.js',

                                   ],complete: init});

               function init (){ }

4- well now this is the code that would make your scrollbar custom :

          sym.$("Your Symbol Name Here").mCustomScrollbar({

                                                                                    scrollInertia:500,

                                                                                    scrollEasing:"easeOutCirc",

                                                                                    scrollButtons:{

                                                                                             enable:false

                                                                                       }

                                                                                });

5- Now go to you project and for example make a Text and write in it several lines,

    then set overflow properties to auto and thats it...

you have your Customized Scrollbar in your Edge Project just hit ctrl+Enter to enjoy it

I Tested on Safari Browser for iPad and iPhone with iOS 6.0.1 and Mac OSx 10.8 Mountain Lion

On the Desktop on Maxthon v4.0.3.1000, Firefox 18.0.1, Chrome Canary 26.0.1397.0, Internet Explorer 9.0.8112.16421

i got CSS and JS file from http://manos.malihu.gr/jquery-custom-content-scroller/ and figure it out by my self to make it works on Edge Animate, i also put a example edge file in download file.

Note : you can read jQuery Custom Content Scroller.doc file to know how change style for your own use.

Note : any Changes on Part 3 would make you browser freez, you can try it by your self

Note: you can Change CSS file for your own style with Dreamveaver, some times after change CSS file wouldn't load on Chrome, Safari and Maxthon, to fix just change a number on that CSS file and save it again, ( like changing opacity from 1 to 0.99)

Note : you can use codes on part 4 anywhere you wanted to have your scrollbar, i make an example in the file

feel free to ask any question you have about Customize Scrollbar.

Zaxist.