leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！
更新：1.1版本
1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂
2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由
3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置
4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示
5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度
使用方法：
1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件
2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件
3、属性说明：
speed 滚动速度，必须
scroll_text 滚动文本内容class，必须
sWidth 滚动条宽度，必须
updownH 上下微调按钮高度，必须
scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
text_width 滚动文本宽度，可选
leonaScroll-1.0仅供学习参考使用，该版本为本人学习时思路版，尚有不足，新版本修复了很多问题，但仍然存在着二次调用问题。不过已经有了解决方案，只是本人比较赖，没有修复，等待1.2版本修复吧！哈哈！
当然如果有人使用后遇到bug或者不方便的地方，欢迎提出，以便本人继续改进。
学习之余写的小插件，如有什么不足之处，还望见谅。
最后感谢在本插件开发过程中，帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑！
废话不说了，附js代码和下载地址
一、Html+Css
二、Jquery
//鼠标拖动div事件
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;
});
//定义上下滚动规则
function goGun(direction,timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //调节滑动速度
if (direction == 1) { //up
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) {
scroll_b.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);
};
//上下微调按钮事件
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
//滚轮事件
if (text_p < 1) {
$(elem).bind("mousewheel",function (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;
}
});
}
});
}
});
以上所述是小编给大家介绍的jQuery leonaScroll 1.1 自定义滚动条插件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！