English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1Latest version
leonaScroll-1.1.js
Welcome to leonaScroll-1.1.js, if you find more problems during use, welcome to correct!
Update:1.1Version
1Fixed some bugs in the previous initial version, such as not being able to adapt to the user's text content, and complex css files
2Users only need to call one method to use this plugin, without having to add and define your scroll text area and outer elements according to the original class name, making it more free
3Added settings for scroll bar width, height of up and down adjustment buttons, and scroll text area
4Added optional settings for whether to display the scroll bar when the text content does not exceed, if not set, the default is not displayed
5Added optional settings for scroll text width, if not set, it will automatically adjust to the best width for you
Usage:
1Establish your Html, refer to the jquery framework and mousewheel plugin, as well as our leonaScroll-1.1.js plugin
2Using $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) to call the plugin
3Attribute description:
speed Scroll speed, must
scroll_text Class of the scroll text content, must
sWidth Scrollbar width, must
updownH Height of the up and down micro-adjustment button, must
scrollbar Whether to display the scrollbar when the text content does not exceed, display as false, do not display as true, optional, default is true
text_width Scroll text width, optional
leonaScroll-1.0 is for learning and reference only, this version is my thinking version when I was learning, and there are still some deficiencies. The new version has fixed many problems, but there are still problems with the second call. However, there is already a solution, but I am a bit lazy and have not fixed it, waiting1.2Version fixes! Haha!
Of course, if anyone encounters bugs or inconvenient places after using it, please feel free to propose them so that I can continue to improve.
This is a small plugin I wrote during my studies. If there are any shortcomings, please forgive me.
Last but not least, I would like to express my gratitude to all the friends who helped and answered my questions during the development of this plugin. Especially, I would like to thank Mr. Delevin for his great clarification!
No more nonsense, attached is the js code and download address
I. Html+Css
<!DOCTYPE html>
<html>
<head>
<meta http-equiv-Type/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/mousewheel.js" type="text/javascript"></script>
<script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script>
<style type="text/css">
.left,.Explain,.center,.welcome,.right,.usage{ height:300px;}
.left,.Explain,.Explain_text{ width:200px;}
.right,.usage,.usage_text{ width:700px;}
.center,.welcome,.welcome_text{ width:300px;}
.left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}
.Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }
</style>
</head>
<body>
<div class="left">
<div class="Explain sss">
<div class="Explain_text">
leonaScroll-1.1.js
<br />Introduction：It is a custom scrollbar based on the jquery framework, combined with the mousewheel plugin
<br /><span style="color:red">(When the text does not exceed the display area, a scrollbar is required)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br /> Welcome to use leonaScroll-1.1.js, if you find more problems during use, welcome to correct!
<br />Author：leona
<br />Publish time：2016-6-16
<br />Blog：<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>
<br /><span style="color:red">(When the text does not exceed the display area, the scrollbar is not displayed by default)</span>
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br /> Welcome to use leonaScroll-1.1.js, if you find more problems during use, welcome to correct!
<br /> Update:1.1Version
<br />1Fixed some bugs in the previous initial version, such as not being able to adapt to the user's text content, and complex css files
<br />2Users only need to call one method to use this plugin, without having to add and define your scroll text area and outer elements according to the original class name, making it more free
<br />3Added settings for scroll bar width, height of up and down adjustment buttons, and scroll text area
<br />4Added optional settings for whether to display the scroll bar when the text content does not exceed, if not set, the default is not displayed
<br />5Added optional settings for scroll text width, if not set, it will automatically adjust to the best width for you
<br /> Usage:
<br />1Establish your Html, refer to the jquery framework and mousewheel plugin, as well as our leonaScroll-1.1.js plugin
<br />2Using $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) to call the plugin
<br />3Attribute description:
<br /> speed Scroll speed, must
<br /> scroll_text Class of the scroll text content, must
<br /> sWidth Scroll bar width, must
<br /> updownH Height of the up and down adjustment buttons, must
<br /> scrollbar Whether to display the scroll bar when the text content does not exceed, display as false, do not display as true, optional, default is true
<br /> text_width Scroll text width, optional
</div>
</div>
</div>
<script type="text/javascript">
//Scroll bar calling method
$(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false});
$(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 });
$(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 });
</script>
</body>
</html>
Second, Jquery
$.fn.extend({
generateUUID: function () {
//Unique ID number generation
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 8)).toString(16);
}); return uuid;
},
LeonaScroll: function (parameter) {
var Sname = $(this).selector;
return this.each(function () {
//变量声明
var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();
//Add scrollbar HTML
var 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 + "" + scrollStyle + "");
//变量声明
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;
1 + index + + index + " + "px"); }
} else return;
//Mouse drag 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);
}
});
//Define up and down scrolling rules
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
return;
}
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);
$(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);
});
//Adjustment 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", function (event, delta, deltaX, deltaY) {
if (delta == 1) {//up
goGun(1, 0);
if (delta ==
return false;
} -1) {//down
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});
The above is the jQuery leonaScroll introduced by the editor to everyone 1.1 Custom scrollbar plugin, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in a timely manner!
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please send an email to codebox.com (replace # with @ when sending an email) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.