Tutorial On How Make a Custom Scrollbar

well, first of sorry bad english, wanted share knowlege on , tried best in easyest way, let's begin:

 

1- download custom scrollbar file.

    file have js files css file makes or scrollbar custom , customscrollbar.an file example

 

2- put these files in project folder pictures below

 

3- goto stage > compositionready , write these codes without changes :

    ( don't know why changes make 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- code make scrollbar custom :

 

          sym.$("your symbol name here").mcustomscrollbar({

                                                                                    scrollinertia:500,

                                                                                    scrolleasing:"easeoutcirc",

                                                                                    scrollbuttons:{

                                                                                             enable:false

                                                                                       }

                                                                                });

 

5- go project , example make text , write in several lines,

    set overflow properties auto and thats it...

 

you have customized scrollbar in edge project hit ctrl+enter enjoy it

 

i tested on safari browser ipad , iphone ios 6.0.1 , mac osx 10.8 mountain lion

on 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 , js file http://manos.malihu.gr/jquery-custom-content-scroller/ , figure out self make works on edge animate, i put example edge file in download file.

 

note : can read jquery custom content scroller.doc file know how change style own use.

 

note : changes on part 3 make browser freez, can try self

 

note: can change css file own style dreamveaver, times after change css file wouldn't load on chrome, safari , maxthon, fix change number on css file , save again, ( changing opacity 1 0.99)

 

note : can use codes on part 4 anywhere wanted have scrollbar, make example in file

 

 

feel free ask question have customize scrollbar.

 

zaxist.

hi zaxist,

thank helpful post on custom scrollbars.

i found applying scrollbar single textblock in edge worked well. 

 

however, if create symbol of several different text layers (with different formatting example), custom scrollbar not work symbol.

 

do know if there way apply custom scroller symbols?

thanks, ian

More discussions in Edge Animate CC

adobe