Write yourself a jquery vertical scrollbar plug-in (panel)

HTML raw scroll bar is more ugly, so some sites, will implement the scroll bar, navigation site hao123 in a sidebar, the custom vertical scroll bar, the effect is more beautiful, as follows:

This scroll bar, only when the mouse hover in this area is displayed, translucent effect, very space-saving said ~ ~, to tell the truth, this effect I very much like.

The principle of the vertical scroll bar, in simple terms:

First name, the outer layer called wrapper, the interior of the call Content,wrapper need to have non-static positioning, content needs absolute positioning, so you can adjust the top value to simulate content scrolling.

Specifically, say:

1.wrapper overflow need to be set to hidden, and on the wrapper to monitor the mouse scrolling events, according to the speed of scrolling set content top value;

2. Add a scroll box and scroll bar to wrapper, and the ratio of the scroll bar to the scroll box corresponds to the ratio of wrapper and content height values

3. When dragging the scrollbar, the top value of the content is proportional to the distance of the scroll bar, which in turn scrolls the scroll bar when the mouse wheel is sliding.

Drag and drop the scroll bar, reuse my last article in the drag-and-drop plugin, the above is the general principle.

The following is the main code, __creator is the main function, ignoring the framework of the code, mainly see __creator

/* Panel * Parameters: obj{* Iwheelstep: Mouse wheel scrolling time step length *sboxclassname: scroll box style * sbarclassname: scroll bar Style *} */$.zui.addwidget ("Panel", { Defaults: {iwheelstep:16,sboxclassname: "Zuipanelscrollbox", Sbarclassname: "Zuipanelscrollbar"},__creator: function (ele) {var jqthis = $ (ele),//If Static is positioned, plus relative positioning if (jqthis.css ("position") = = = "Static") {Jqthis.css (" Position "," relative ");} Jqthis.css ("Overflow", "hidden");//must have a unique direct child element, plus absolute positioning of the direct child element var jqchild = Jqthis.children (": First"); if ( Jqchild.length) {jqchild.css ({top:0,position: "absolute"}); Else{return;} var opts = Jqthis.data ($.zui.panel.soptsname);//Create scroll box var Jqscrollbox = $ ("<div style=" Position:absolute;display: none;line-height:0; ' ></div> "); Jqscrollbox.addclass (opts.sboxclassname);//create scroll bar var jqscrollbar= $ (" <div style= ' position: absolute;display:none;line-height:0; ' ></div> Jqscrollbar.addclass (opts.sbarclassname); Jqscrollbox.appendto (jqthis); Jqscrollbar.appendto ( Jqthis); opts.itop = parseint (Jqscrollbox.css ("top"); opts.iwidth = JQSCRollbar.width (); opts.iright = parseint (Jqscrollbox.css ("right"));//Add drag to trigger Custom function Jqscrollbar.on ("Draggable.move", function () {var opts = Jqthis.data ($.zui.panel.soptsname); Fnscrollcontent (Jqscrollbox,jqscrollbar,jqthis,jqchild,  opts.itop,0);}); Event object var oevent ={mouseenter:function () {fnfreshscroll (); Jqscrollbox.css ("Display", "block"); Jqscrollbar.css (" Display "," block "),},mouseleave:function () {jqscrollbox.css (" display "," none "), Jqscrollbar.css (" Display "," none ");}}; var smousewheel = "MouseWheel"; OnMouseWheel "in document)" {Smousewheel = "dommousescroll";} Oevent[smousewheel] = function (ev) {var opts = Jqthis.data ($.zui.panel.soptsname); var Iwheeldelta = 1;ev.preventdefault ();//block default Event EV = ev.originalevent;//get native eventif (ev.wheeldelta) {Iwheeldelta = ev.wheeldelta/120;} Else{iwheeldelta =-EV.DETAIL/3;} var imintop = Jqthis.innerheight ()-jqchild.outerheight ();//outside higher than inside, do not need to respond to scrolling if (imintop>0) {jqchild.css ("top", 0); return;} var iTop = parseint (Jqchild.css ("Top")), var iTop = ITop + opts.iwheelstep*iwheeldelta;itop = iTop > 0? 0:itop;itop = ITop < imintop? Imintop:itop;jqchild.css ("Top", ITop); Fnscrollcontent (jqthis,jqchild,jqscrollbox,jqscrollbar,0,opts.itop);} Record Add Event Jqthis.data ($.zui.panel.seventname,oevent);//Follow the scrolling function fnscrollcontent (jqwrapper,jqcontent, Jqfollowwrapper,jqflollowcontent,ioffset1,ioffset2) {var opts = Jqthis.data ($.zui.panel.soptsname); var rate = ( parseint (Jqcontent.css ("Top"))-ioffset1)/(Jqcontent.outerheight ()-jqwrapper.innerheight ())//rolled-up ratio var ITop = ( Jqflollowcontent.outerheight ()-jqfollowwrapper.innerheight ()) *rate + ioffset2;jqflollowcontent.css ("Top", ITop);} Refresh scroll bar function fnfreshscroll () {var opts = Jqthis.data ($.zui.panel.soptsname); var iscrollboxheight = Jqthis.innerheight () -2*opts.itop;var irate = Jqthis.innerheight ()/jqchild.outerheight (); var iScrollBarHeight = Iscrollbarheight = Math.Round (irate*iscrollboxheight);//If the ratio is greater than or equal to 1, no scroll bar is required, and you do not need to add a drag event if (irate >= 1) { Jqscrollbox.css ("height", 0); Jqscrollbar.css ("height", 0); return;} JqscrollBox.css ("height", iscrollboxheight); Jqscrollbar.css ("height", iscrollbarheight);//Calculate drag-and-drop boundary, add drag event var oboundary = { Imintop:opts.itop};oboundary.imaxtop = Iscrollboxheight-math.round (irate*iscrollboxheight) +opts.iTop;o Boundary.iminleft = Jqthis.innerwidth ()-opts.iwidth-opts.iright;oboundary.imaxleft = OBoundary.iMinLeft; Fnscrollcontent (Jqthis,jqchild,jqscrollbox,jqscrollbar,0,opts.itop); Jqscrollbar.draggable ({oBoundary:oBoundary });}},__destroyer:function (ele) {var Jqele = $ (ele); if (Jqele.data ($.zui.panel.sflagname)) {var opts = Jqele.data ($). ZUI.panel.sOptsName); Jqele.children (".") +opts.sboxclassname). Remove (); Jqele.children ("." +opts.sbarclassname). Remove ();}});

There are a few points to note:

1.jQuery is not compatible with mouse wheel scrolling events, so here are the native events to use:

FF is called Dommousescroll: through the detail property of the event to know the mouse scrolling situation, scroll down to positive, negative upward, in multiples of 3 bid scrolling distance

The other is called MouseWheel, through the event of the Wheeldelta can know the mouse scrolling situation, scroll up to positive, downward negative, in multiples of 120 bid scrolling distance

The above code uses jquery's on to mount the event, and you need to be aware of getting the native event object-->ev.originalevent;

Spit a slot: How is this FF and other browsers, not IE and other browsers? ~ ~ ~

2. In the event MouseEnter, every time the fnfreshscroll is called, that is, each time the mouse is moved, will dynamically calculate the size of the scroll bar, in fact, in order to be compatible with the content will dynamically change the situation (not all cases can, when the content becomes very small, Less than the height of the outer layer, or there is a problem)

3. The above code puts all the events in the Oevent object, but does not add them to the corresponding element, because I have encapsulated a layer on the plugin (as you might have guessed, yes, the $.zui.addwidget function at the beginning), and adding events will be done in that layer.

In the process of writing this plugin, I translated some specifications directly into the code and wrote a plugin skeleton:

$.zui = $.zui | | {}$.zui.emptyfn = function () {};$.zui.aswidget = [];/* * Core code, defines an add-on skeleton */$.zui.addwidget = function (sname,osefdef) { Set constants in the specification Sflagname, Seventname, Soptsname$.zui.aswidget.push (SName); var w = $.zui[sname] = $.zui[sname] | | {};var Sprefix = "ZUI" + snamew.sflagname = Sprefix;w.seventname = Sprefix + "Event"; w.soptsname = Sprefix + "Opts"; W.__CR Eator = $.zui.emptyfn;w.__destroyer = $.zui.emptyfn;$.extend (w,osefdef); W.fn = function (ele,opts) {var JqEle = $ (ele); Jqele.data (W.soptsname,$.extend ({},w.defaults,opts));//If the element has already executed the plug-in, it returns directly, equivalent to modifying the configuration parameter if (Jqele.data ( W.sflagname)) {return;} Jqele.data (w.sflagname,true); W.__creator (ele); Jqele.on (Jqele.data (W.seventname));}; W.UNFN = function (ele) {w.__destroyer (ele); var Jqele = $ (ele);//Remove Listener event if (Jqele.data (W.sflagname)) {Jqele.off ( Jqele.data (W.seventname)); Jqele.data (W.sflagname,false);}}

In writing the draggable plugin, I defined a few specifications, such as the main function must be called FN, the destruction function must be called UNFN, here you can see, in the AddWidget component defines the FN function, and write down the skeleton, __creator and __ Destroyer need specific plug-in implementation, the same code, the same logic in the skeleton, for example, to a certain rule to plug-ins need to use the constant name; plug-in parameter initialization logic; plug-in second execution is equivalent to modifying parameters, does not repeat the logic ~ ~ ~

Finally, put the unified method on the $.fn ~ ~, this in the previous section, said, $.zui.aswidget is an array, inside the name of the plug-in, which is naturally in the $.zui.addwidget this function to put in the ~ ~ ~

$.each ($.zui.aswidget,function (i,widget) {unwidget = "un" +widget;var w = {};w[widget] = function (args) {This.each ( function () {$.zui[widget].fn (This,args);}); return this;}; W[unwidget] = function () {This.each (function () {$.ZUI[WIDGET].UNFN (this);}); return this;} $.fn.extend (w);});

The effect of the implementation

Conclusion:

Have to say, this is not a panel, because there is no horizontal scroll bar, there are two reasons, one is because it is lazy, do not want to achieve, the principle is similar, and I hate the horizontal scroll bar ~ ~ ~

To download the source code, see here: Source code

Write yourself a jquery vertical scrollbar plug-in (panel)