jq模拟滚动条

最新推荐文章于 2021-06-05 04:02:28 发布

转载最新推荐文章于 2021-06-05 04:02:28 发布 · 92 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jane2013/p/3249825.html


　　最近工作上用到很多自自定滚动，自己索性就用jq封装了一个插件，以方便自己偷懒使用

$.fn.scrollList=function(options){
var defaults={
container:$('#createProduct_popDiv1'),//父元素容器
containerP:$('#createProduct_popDiv2'),//绝对定位容器
containerScroll:$('#createProduct_popDiv3')//滚动条容器

};
var options=$.extend({},defaults,options||{});
var h=options.container.innerHeight(),h2=options.containerP.innerHeight(),per,h3,dray=false;

if(h2<h) {
options.containerScroll.hide();
$(document).unbind("mouseover").unbind("mouseup");
return;
}
per=h/h2;

h3=Math.floor(per*h);
if(h3 <= 4){
h3 = 4;
}
var movePer = (h2 -h) / (h - h3);

options.containerScroll.css('height',h3+'px')
var currentY=0,posY=options.containerP.css('top'),dis=0;
//滚动条开始移动
options.containerScroll.mousedown(function(e){

dray=true;
currentY=e.pageY;
}).css('cursor','pointer');
$(document).mousemove(function(e){
if(dray){
dis=e.pageY-currentY;
var nowY=dis+parseInt(posY);
if(nowY<=0){
nowY=0;
}else if(nowY >= h-h3){
nowY=h-h3;

}

options.containerScroll.css('top',nowY+'px');
//比例
options.containerP.css('top','-'+(nowY * movePer )+'px');

}
});
$(document).mouseup(function(e){
dray=false;
posY=options.containerScroll.css('top');
});
}