JQuery Leonascroll 1.1 Custom scroll bar plug-in (recommended) _jquery

leonaScroll-1.1 Latest edition

Leonascroll-1.1.js

Welcome to use Leonascroll-1.1.js, if you find more problems in the use process, please correct me!

Update: Version 1.1

1, fixed the previous initial version of some bugs, such as not adaptive user text content, CSS files Miscellaneous

2, the user can only call a method to use the plug-in, without the original class name to add and define your scroll bar text field and the outer elements, appears more free

3, add the scroll bar width, up and down fine-tuning the button height, scrolling text area settings

4, the addition of text content does not exceed the display scroll bar optional setting options, if not set, the default is not displayed

5, add the scrolling text width of the optional setting options, such as not set will automatically fit you to the best width

How to use:

1, build your HTML, reference jquery framework and MouseWheel Plug-ins, and our leonascroll-1.1.js plug-ins

2. Use $ (""). Leonascroll ({SPEED,SCROLL_TEXT,SWIDTH,UPDOWNH}) Invoke plug-in

3, Attribute Description:

Speed scrolling speed, must

Scroll_text scrolling text content class, you must

Swidth scroll bar width, you must

Updownh up and down trimmer button height, must

ScrollBar whether scroll bars are displayed when text content is not exceeded, false, not displayed as true, optional, default to True

Text_width scrolling text width, optional

leonaScroll-1.0 only for learning reference use, this version of my study when the idea version, there are not enough, the new version of the repair of a lot of problems, but there are still two call problems. However, there is a solution, but I am more lai, there is no repair, wait for the 1.2 version repair it! Ha ha!

Of course, if someone use after the bug or inconvenient place, welcome to put forward, so that I continue to improve.

Learn to write a small plug-in, if there are any deficiencies, but also hope to forgive.

Finally, thank you for your help and answers to my questions in this plugin development process. Thank you especially for Mr. Delevin's great doubts!

No more nonsense, attached JS code and download address

First, Html+css

<! DOCTYPE html>  

Two, Jquery

$.fn.extend ({generateuuid:function () {//Unique ID value generates var d = new Date (). GetTime (); var uuid = ' xxxxxxxx-xxxx-4xxx-yxxx-xx Xxxxxxxxxx '. Replace (/[xy]/g, function (c) {var r = (d + math.random () *)% | 0; d = Math.floor (D/16); return (c = = ' x '?
R: (R & 0x7 | 0x8)). toString (16); });
return UUID; }, Leonascroll:function (parameter) {var sname = $ (this). Selector: Return This.each (function () {//variable declaration var elem = $ (th IS), Celem = $ (this). Find (parameter.scroll_text), index = $ (this). Generateuuid (), Text_hidden = $ (elem). Height (), Con_
width = $ (elem). width ();
Add scroll bar html var scrollhtml = "";
scrollhtml + + "<div class= ' scroll_up leonaup" + index + "' ></div>"; scrollhtml + = "<div class= ' scroll_cen leonacen" + index + "' ><div class= ' Scroll_button Leonabutton" + index + "' &
Gt;</div></div> ";
scrollhtml + + "<div class= ' scroll_down leonadown" + index + "' ></div>"; $ (elem). Append ("<div class= ' scroll leonas" + index + "' >" + scrollhtml+ "</div>");
Add scroll bar css var scrollstyle = ""; Scrollstyle + = "body {-moz-user-select:none; * * Firefox/-webkit-user-select:none; /*webkit Browser * *-ms-user-select:none; /*ie10*/-khtml-user-select:none; * * Early browser/user-select:none;
}"; Scrollstyle + = sname + "{position:relative; Overflow-y: Hidden;
Clear:none} "; Scrollstyle + = Parameter.scroll_text + "{width:" + (Parameter.text_width = = undefined? (con_width-parameter.swidth): parameter.text_width) + "PX; Word-break:break-word; Position:absolute; left:0; top:0; Clear:both;
}"; Scrollstyle + = "Scroll {height:" + text_hidden + "PX; Float:right;
}\r\n "; Scrollstyle = "Scroll,.scroll. Scroll_cen,. Scroll scroll_up, scroll. Scroll_down {width:" + parameter.swidth + "PX;
}"; Scrollstyle + = "scroll. SCROLL_UP,. Scroll. scroll_down {height:" + parameter.updownh + "PX; Line-height: "+ parameter.updownh +" PX; Color: #ffffff; font-size:12px; Font-weight:bold; Background-image:url (/img/bw.png); Background-color: #161515; BAckground-repeat:no-repeat;
Cursor:pointer;} "; Scrollstyle = "scroll. scroll_up{background-position:0px 6px; border-radius:5px 5px 0 0;
}"; Scrollstyle = "scroll. scroll_down{background-position:0px-49px; border-radius:0 0 5px 5px;
}";
Scrollstyle = ". Scroll. scroll_up:hover{background-position:0px-11px;}";
Scrollstyle = ". Scroll. scroll_down:hover{background-position:0px-31px;}"; Scrollstyle + = "Scroll. Scroll_cen {height: + (TEXT_HIDDEN-PARAMETER.UPDOWNH * 2) +" PX; Background-color: #777676; position:relative;
}"; Scrollstyle + = "scroll. Scroll_cen. Scroll_button {width: + (parameter.swidth-2) +" PX; margin:0px 1px; Background:url (/img/tiao.jpg) repeat-y 0 0; border-radius:5px; Position:absolute; Cursor:pointer;
}";
$ ("Head"). Append ("<style type= ' text/css ' >" + scrollstyle + "</style>"); Variable declaration var text_show = $ (celem). Height (), Scroll_b = $ (". Leonabutton" + index + ""), text_p = Text_hidden/text_show, Bh_ Max = $ (". Leonas" + index + ".) LeoNacen "+ index +" "). Height (), BH = text_p * BH_MAX; if (Parameter.scrollbar = = True | | | parameter.scrollbar = = undefined) {if (text_p >= 1) $ (". Leonas" + index + ""). CSS ( "Display", "none"); else {$ (". Leonas" + index + ""). CSS ("Display", "block"); Scroll_b.css ("height", BH + "px");

else return;
Drag the mouse div event var needmove = false, Mousey = 0; Scroll_b.mousedown (function (event) {Needmove = true; var bh_top = Scroll_b.position (). top; mousey = Event.pagey-bh_top ;
});
$ (document). MouseUp (function (event) {Needmove = false;}); $ (document). MouseMove (function (event) {if (needmove) {var Smousey = event.pagey, Bh_top = Smousey-mousey, texty = Bh_
Top/bh_max * text_show; if (bh_top <= 0) scroll_b.css ("Top", 0); $ (Celem). CSS ("top", 0);
Return if (bh_top >= bh_max-bh) scroll_b.css ("Top", BH_MAX-BH); $ (Celem). CSS ("top", text_hidden-text_show);
Return Scroll_b.css ("Top", bh_top);
$ (Celem). CSS ("top",-texty);
} return;
}); Define up and down scrolling rule function gogun (direction, timer) {
Bh_top = Scroll_b.position (). Top; var h = 0; H + + parameter.speed; Adjust sliding speed if (direction = = 1) {//up var toping = bh_top-h; if (bh_top <= 0 | | Toping <= 0) {scroll_b.css ("top", 0); $ (Celem). CSS ("top", 0); if (timer = 2) clearinterval (gothread);//need timer RE
Turn
} scroll_b.css ("Top", bh_top-h);
}; if (direction = = 1) {//down var Downing = bh_top + H; if (bh_top >= BH_MAX-BH | | Downing >= bh_max-bh) {scroll_b.css ("top", bh_max-bh); \ n (celem). CSS ("top", text_hidden-text_show); if (timer = = 2) clearinterval (Gothread);
Need timer return;
} scroll_b.css ("Top", Bh_top + h);
var texty = Bh_top/bh_max * text_show;
$ (Celem). CSS ("top",-texty);
};
Up and down Trimmer button event function Mintiao (MINTB, D, t) {var gothread = "";
Mintb.mouseup (function () {clearinterval (gothread);});
Mintb.mousedown (function () {clearinterval (gothread); gothread = SetInterval (function () {Gogun (d, t);}, 300;});
Mintb.click (function () {gogun (d);});
}; Mintiao ($ (". Leonaup" + index + ""), 1, 2);//up Mintiao ($ (". Leonadown" + index + ""),-1, 2);//down//Wheel event if (Text_p < 1) {$ (Elem). bind ("MouseWheel", Fu 
Nction (event, Delta, DeltaX, DeltaY) {if (delta = = 1) {//up gogun (1, 0); if (Scroll_b.position (). Top!= 0) return false;
} if (delta = = 1) {//down gogun ( -1, 0), if (Math.ceil (Scroll_b.position (). Top)!= Math.ceil (BH_MAX-BH)) return false;
}
});
}
}); }
});

The above is a small set to introduce the jquery leonascroll 1.1 custom scroll bar plug-ins, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone!