JQuery leonaScroll 1.1 custom scroll bar plug-in (recommended), jqueryleonascroll

JQuery leonaScroll 1.1 custom scroll bar plug-in (recommended), jqueryleonascroll

LeonaScroll-1.1 Latest Version

LeonaScroll-1.1.js

Welcome to use leonaScroll-1.1.js, if you find more problems during use, please correct me!

Update: Version 1.1

1. Fixed some bugs in earlier versions, such as the inability to adapt to the user's text content and complicated css files.

2. You only need to call a method to use this plug-in. You do not need to add or define the text fields and outer elements of your scroll bar according to the original class name.

3. added the scroll bar width, up and down fine-tune button height, and scroll text area settings.

4. added the optional setting options for whether to display the scroll bar when the text content is not exceeded. If this option is not set, it is not displayed by default.

5. An optional setting option for the scroll text width is added. If this option is not set, it will automatically adapt to the optimal width.

Usage:

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}) to call the plug-in.

3. attribute description:

Speed Rolling speed, required

Scroll_text: Specifies the class of the scrolling text content, which must be

Width of the sWidth scroll bar, required

The height of the updownH up/down fine-tuning button, required

Whether to display the scroll bar when the content of the scrollbar text is not exceeded. It is displayed as false. If it is not displayed as true, it is optional. The default value is true.

Text_width: Specifies the width of the scrolling text. Optional.

LeonaScroll-1.0 is only for learning reference, this version is my learning idea version, there are still deficiencies, the new version fixes a lot of problems, but there are still secondary call problems. However, I already have a solution, but I am not sure about it. Please wait for version 1.2 to fix it! Haha!

Of course, if someone encounters a bug or is inconvenient to use, you are welcome to raise it so that you can continue to improve it.

I hope you will forgive me for any shortcomings in the plug-ins written after learning.

Finally, I would like to thank my friends who have helped and answered my questions during the development of this plug-in. In particular, I would like to thank Mr. Delevin for his great encouragement!

If you don't talk nonsense, add the js Code and

I. Html + Css

<! DOCTYPE html> 
Ii. Jquery
$. Fn. extend ({generateUUID: function () {// generate a unique ID value var d = new Date (). getTime (); var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx '. replace (/[xy]/g, function (c) {var r = (d + Math. random () * 16) % 16 | 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 = $ (this), celem = $ (this ). find (parameter. scroll_text), index = $ (this ). generateUUID (), text_hidden = $ (elem ). height (), con_width = $ (elem ). width (); // Add the scroll bar Htmlvar scrollHTML = ""; scrollHTML + = "<div class = 'scroll _ up leonaup" + index + "'> </Div> "; scrollHTML + = "<div class = 'scroll _ cen leonacen" + index + "'> <div class = 'scroll _ button leonabutton" + index + "'> </div> </div> "; scrollHTML + = "<div class = 'scroll _ down leonadown" + index + "'> </div>"; $ (elem ). append ("<div class = 'scroll leonas" + index + "'>" + scrollHTML + "</div>"); // Add a scroll bar CSSvar 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 {hei Ght: "+ 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 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: "+ (paramete R. 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 (), B H = 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 div event var needMove = false, mouseY = 0; scroll_ B .mousedown (function (event) {needMove = true; var bH_Top = scroll_ B .position (). to P; 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); expires (celem).css ("top ", 0); return; if (bH_Top> = bH_max-bH) scroll_ B .css ("top", bH_max-bH); expires (celem).css ("top", text _ Hidden-text_show); return;scroll_ B .css ("top", bH_Top); examples (celem).css ("top",-textY);} return ;}); // define the upper and lower rolling rule function goGun (direction, timer) {bH_Top = scroll_ B .position (). top; var h = 0; h + = parameter. speed; // adjust the sliding speed if (direction = 1) {// upvar Toping = bH_Top-h; if (bH_Top <= 0 | Toping <= 0) export scroll_ B .css ("top", 0); then (celem).css ("top", 0); if (timer = 2) clearInterval (goThread); // need timerre Turn?=scroll_ B .css ("top", bH_Top-h) ;}; if (direction =-1) {// downvar Downing = bH_Top + h; if (bH_Top> = bH_max-bH | Downing> = bH_max-bH) Export scroll_ B .css ("top", bH_max-bh1_1_$(celem1_.css ("top", text_hidden-text_show ); if (timer = 2) clearInterval (goThread); // need evaluate ("top", bH_Top + h);} var textY = bH_Top/bH_max * text_show1_#(celem1_.css ("top ", -textY) ;}; // events of the up or down fine-tuning button 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); // upminTiao ($ (". leonadown "+ index +" "),-1, 2); // down // wheel event if (text_p <1) {$ (elem ). bind ("mousew Heel ", function (event, delta, deltaX, deltaY) {if (delta = 1) {// upgoGun (1, 0); if (scroll_ B .position (). top! = 0) return false;} if (delta =-1) {// downgoGun (-1, 0); if (Math. ceil (scroll_ B .position (). top )! = Math. ceil (bH_max-bH) return false ;}});}});}});
The above is the jQuery leonaScroll 1.1 custom scroll bar plug-in introduced by xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in time!