js自定义的简易滚动条
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JavaScript--简易滚动条--兼容各浏览器</title>
<style>
* { padding:0; margin:0;}
.cont_Ov { position:relative; top:100px; width:400px; border:2px solid #f00; margin:0 auto;}
.scool { position:absolute; top:0; right:0; z-index:99; width:5px; background-color:#000;}
.scool_An { position:absolute; top:0; right:0; z-index:999; width:5px; height:30px; background:url(un_bg_bar.gif) -33px 0px;}
</style>
</head> <body>
<div id="cont_Ov" class="cont_Ov">
<div style=" padding:20px; overflow:hidden;">
hahawefa1<br />
hahawefa2<br />
hahawefa3<br />
hahawefaae4<br />
hahawefa5<br />
hahawefa6<br />
hahawefa7<br />
hahawefaf8<br />
hahawefa9<br />
hahawefa10fa<br />
awfawef-11<br />
hahawefa-12<br />
hahawefagag-13<br />
hahawefa-14<br />
hahawefa-15<br />
hahawefa-16<br />
hahawefaaf-17<br />
hahawefa-18<br />
hahawefaff-19<br />
hahawefafffff-20<br />
hahawefa1-21<br />
hahawefa2-22<br />
hahawefa3-23<br />
hahawefaae-24<br />
hahawefa-25<br />
hahawefa-26<br />
hahawefa-27<br />
hahawefa-28<br />
hahawefa-29<br />
hahawefaf-30<br />
hahawefa-31<br />
hahawefafa-32<br />
awfawef-33<br />
hahawefa-34<br />
hahawefagag-35<br />
hahawefa-36<br />
hahawefa-37<br />
hahawefa-38<br />
hahawefaaf-39<br />
hahawefa-40<br />
hahawefaff-41<br />
hahawefafffff-42<br />
1212121
</div>
</div>
<script>
var get = {
byId : function(id){
return typeof id === "string" ? document.getElementById(id) : id;},//获取ID的元素?
sty : function(obj,name){
return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle(obj, null)[name];},//获取元素样式
obx_H : function(obj){
var obj = obj.getBoundingClientRect();//http://www.51res.net/html/2004/0408/10771.html获取元素位置
return obj.bottom - obj.top;},
ScoTop : function(){
return document.documentElement.scrollTop || document.body.scrollTop;}//滚动高度
}; function enclose(con_Ov, con_Ov_H, con, con_H, scool,scool_H){//鼠标滚动事件绑定自定义方法wheelHandler
var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -1);
if(document.onwheel !== undefined){
con_Ov.onwheel = wheelHandler;
}else if(document.onmousewheel !== undefined){
con_Ov.onmousewheel = wheelHandler;
}else if(isFirefox){
con_Ov.addEventListener("DOMMouseScroll", wheelHandler, false);
} function wheelHandler(e){//滚动方法
var e = e || window.event,
deltaY = e.wheelDeltaY || (e.wheelDeltaY===undefined && e.wheelDelta) || e.deltaY*-1 || e.detail*-1 || 0,//鼠标滚动事件判断滚动方向，deltaY = e.wheelDelta || e.deltaY*-1 || e.detail*-1这样同样效果不知道为什么写那么多呢
con_Top,// = parseFloat(get.sty(con,"top")),
con_MaxH = con_H - con_Ov_H, //内容的最大滚动距离
scool_MaxH =con_Ov_H - scool_H,//左侧最大滚动距离
gd_Auto,//滚动设置的Interval对象
star_Time = 0, //滚动开始时间
now_Time = 0,//滚动结束时间
step = 10; //每次滚动多少像素
if(gd_Auto){clearInterval(gd_Auto);}
star_Time = new Date().getTime();
if(deltaY < 0){//下滚
gd_Auto = setInterval(function(){
con_Top = parseFloat(get.sty(con,"top")),
now_Time = new Date().getTime(); if(con_Top <= -con_MaxH){//滚到底了
clearInterval(gd_Auto);
con.style.top = - con_MaxH + "px";
scool.style.top = scool_MaxH + "px";
return;
} con.style.top = con_Top - step +"px";//主题内容滚动每次10个像素，鼠标滚轮一次滚动触发好几次滚轮事件
scool.style.top = Math.round(-(con_Top-step)/con_MaxH*scool_MaxH) + "px"; if(con_Top - step <= -con_MaxH || now_Time - star_Time > 100){//前面是防止滚出最多高度，后面是防止一直滚动导致滚动延迟太大导致不流畅
clearInterval(gd_Auto);
con_Top - step <= -con_MaxH && (con.style.top = - con_MaxH + "px",scool.style.top = scool_MaxH + "px"); //当滚动超出后让其回位,程序运行的几毫秒内超出的距离，效果不大
return;
}
},20) }else if(deltaY > 0){//上滚
gd_Auto = setInterval(function(){
con_Top = parseFloat(get.sty(con,"top")),
now_Time = new Date().getTime();
if(con_Top >= 0){
clearInterval(gd_Auto);
con.style.top = 0 + "px";
scool.style.top = 0 + "px";
return;
} con.style.top = con_Top + step +"px";
scool.style.top = Math.round(-(con_Top+step)/con_MaxH*scool_MaxH) + "px"; if(con_Top + step >= 0 || now_Time - star_Time > 200){
clearInterval(gd_Auto);
con_Top + step >= 0 && (con.style.top = 0 + "px",scool.style.top = 0 + "px");
return;
}
},20)
}else{
alert("错误！");
} if(e.stopPropagation) e.stopPropagation(); //禁止冒泡
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();
else e.returnValue = false;
}
} function drag(con_Ov, con_Ov_H, con, con_H, ele, ele_H, e){//鼠标拉动事件
var e = e || window.event,
scroll_T = get.ScoTop(),//当前浏览器滚动高度
sc_H = con_Ov_H - ele_H,//内容的可视高度减去滚动条按钮的高度（即滚动条的可以滚动的高度）
startY = e.clientY + scroll_T,//点击的鼠标在网页中的Y轴位置
origY = ele.offsetTop,//滚动条按钮的TOP
deltaY = startY - origY;//鼠标点击位置在滚动条按钮的Y轴位置 if(document.addEventListener){
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);
}else if(document.attachEvent){ // IE Event Model for IE5-8
ele.setCapture();//鼠标捕获(setCapture)作用是将鼠标事件捕获到当前文档的指定的对象。可以让点击其他地方时这个元素也像被点击一样。这个对象会为当前应用程序或整个系统接收所有鼠标事件。
ele.attachEvent("onmousemove", moveHandler);
ele.attachEvent("onmouseup", upHandler);
ele.attachEvent("onlosecapture", upHandler);//当元素失去鼠标移动所形成的选择焦点时触发的事件
} if(e.stopPropagation) e.stopPropagation(); //禁止冒泡
else e.cancelBubble = true;
if(e.preventDefault) e.preventDefault();//阻止默认事件
else e.returnValue = false; function moveHandler(e) {//鼠标拖动滚动条的方法
var e = e || window.event,
ele_Top = Math.max(e.clientY + scroll_T - deltaY,0) && Math.min(e.clientY + scroll_T - deltaY,sc_H),//不就是拖动滚动条时，滚动条按钮的TOP和origY算法一样但是要重新获取拖动后的啊
con_Top = -ele_Top/sc_H*(con_H - con_Ov_H);
//内容滚动TOP，负负得正哦
ele.style.top = ele_Top + "px";
con.style.top = con_Top + "px"; if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
} function upHandler(e){//鼠标弹起不拖动时的方法
var e = e || window.event;
if(document.removeEventListener){
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
}else if(document.detachEvent){
ele.detachEvent("onlosecapture", upHandler);
ele.detachEvent("onmouseup", upHandler);
ele.detachEvent("onmousemove", moveHandler);
ele.releaseCapture();
}
if(e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
}
} function clickScroll(con,con_H,con_Ov_H,ele,ele_H,scool,e,kk,h){//点击滚动条非滚动按钮方法
var e = e || window.event,
scroll_T = get.ScoTop(),//当前浏览器滚动高度
sc_H = con_Ov_H - ele_H,//内容的可视高度减去滚动条按钮的高度（即滚动条的可以滚动的高度）
startY = e.clientY + scroll_T,//点击的鼠标在网页中的Y轴位置
origY = ele.offsetTop,//滚动条按钮的TOP
sool_T=kk+scroll_T,//滚动条距离页面顶部高度
//deltaY = startY - origY;//鼠标点击位置在滚动条按钮的Y轴位置
move_T=startY-sool_T;//鼠标点击在滚动条中的位置
//alert(h);
if(move_T>h){move_T=h};
scool.style.top = move_T + "px";
con.style.top = Math.round(-move_T/sc_H*(con_H - con_Ov_H)) + "px";
}//赶着吃饭，下次再完善 function jsScroll(idName,height,clName01,clName02){
var con_Ov = get.byId(idName),
con_Ov_Height = parseFloat(get.sty(con_Ov,"height")),
cont = con_Ov.getElementsByTagName("div")[0],
cont_H = Math.round(get.obx_H(cont)); if(!con_Ov_Height || con_Ov_Height == "auto" || con_Ov_Height>=height){//如果样式设置不对给重置
con_Ov.style.height = height+"px";
con_Ov.style.overflow = "hidden";
con_Ov_Height = height;
} if(cont_H<=con_Ov_Height) return;//如果没超出就不加滚动条了//如果没超出就不加滚动条了,如果是隐藏的元素那么cont_H会一直等于0，要在弹窗显示后才触发,要限制第一次点击弹出才添加元素
cont.style.position = "relative";//设置内容必要CSS样式；
cont.style.top = "0px";
cont.style.zIndex = "0"; var scool = document.createElement("div"),scool_An = document.createElement("div");//添加滚动条
if(clName01){
scool.className = clName01;
}else{
scool.style.cssText = "position:absolute; top:0; right:0; z-index:99; width:10px; background-color:#ccc;";
}
scool.style.height = con_Ov_Height + "px";
con_Ov.appendChild(scool);
if(clName02){
scool_An.className = clName02;
}else{
scool_An.style.cssText = "position:absolute; top:0; right:0; z-index:999; width:10px; height:30px; background-color:#999;";
}
con_Ov.appendChild(scool_An); var scool_AnH = parseFloat(get.sty(scool_An,"height"));
scool_An.onmousedown = function(e){
drag(con_Ov,con_Ov_Height,cont,cont_H,this,scool_AnH,e);//鼠标按下执行
}
enclose(con_Ov,con_Ov_Height,cont,cont_H,scool_An,scool_AnH);//鼠标没按下执行
scool.onclick = function(e){//点击滚动条非滚动按钮执行
var kk=scool.getBoundingClientRect().top,//滚动条相对页面的TOP
h=scool.getBoundingClientRect().bottom-scool.getBoundingClientRect().top-scool_An.getBoundingClientRect().bottom+scool_An.getBoundingClientRect().top;//滚动条减去滚动条按钮的高度
clickScroll(cont,cont_H,con_Ov_Height,this,scool_AnH,scool_An,e,kk,h);
}
}
jsScroll("cont_Ov",200,"scool","scool_An"); //如果元素是隐藏的就在元素显示后调用，而且只能调用一次
</script>
</body>
</html>
js自定义的简易滚动条的更多相关文章
- js自定义弹出框
js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- 漫谈js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- js自定义验证码
分享一个js自定义的验证码 window.onload = function () { var code; $('.changePassword').click(function () ...
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- 与你相遇好幸运，Sails.js自定义responses
在 /api/responses/ 新建文件 >serviceDBError.js 自定义的数据库错误 >serviceError.js 自定义的数据错误 >serviceSucc ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
- jquery.validate.js默认配置，jquery.validate.js自定义提示信息
jquery.validate.js默认配置,jquery.validate.js自定义提示信息 配置jQuery.validator默认的处理方法 >>>>>>& ...
- web前端对上传的文件进行类型大小判断的js自定义函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Markdown引用本地图片语法
Markdown引用本地图片语法 markdown引用图片标准方式如下:  测试markdown文本如下: # 测试相对路径图片 ![Alt ...
- MySQL连接无法解析HOST主机名
#1042 - Can't get hostname for your address 使用IP链接或域名链接都可能遇到这个问题 解决办法: my.ini 或 my.cnf 末尾添加 skip-nam ...
- NEUQ1055谭浩强C语言(第三版)习题6.11
//迭代公式不是很理解,写出来算了.. #include <stdio.h> #include <math.h> int main() { double x0,x1; int ...
- 利用Rsync在windows和linux之间同步数据
使用Rsync从windows同步文件到linux 1.windows服务端的安装与配置: 免费软件下载地址:http://linux.linuxidc.com/,用户名密码为:www.linuxid ...
- 默认conf指向位置
查看nginx 默认配置文件所在位置 >> nginx -t print --> nginx: the configuration file /etc/nginx/nginx.co ...
- [ An Ac a Day ^_^ ] [kuangbin带你飞]专题六 最小生成树 POJ 1251 Jungle Roads
题意: 有n个点 每个点上有一些道路 求最小生成树 解释下输入格式 A n v1 w1 v2 w2 A点上有n条边 A到v1权值是w1 A到v2权值是w2 思路: 字符串处理之后跑kruskal求最小 ...
- 矩阵赋值实例（matrixAssign）
题目:给一个二维数组赋值. 分析:主机端代码完成的主要功能: 启动CUDA,使用多卡时应加上设备号,或使用cudaSetDevice()设置GPU设备. 为输入数据分配内存空间 初始化输入数据 为GP ...
- WinForm ListView
今天,我学习了公共控件中的ListView的内容. 首先,在利用ListView布置界面时,有以下三个方面: 1.视图: 在其右上方小箭头点击将视图改为Details:或者右键属 ...
- Kruskal算法的简单实现
嘛嘛嘛,好像大家在实现Kruskal算法是都是用的边集数组,判断图的连通性咱不会,o(╯□╰)o(为什么咱这么菜诶) Kruskal算法: 规则: (1)对每一条边按照从小到大进行排序 (2)加入边的 ...
- CADisplayLink使用中的循环引用问题的解决
解决循环引用的问题,参考学习了ibireme大神的YYFPSLabel的实现,整理以备用 // 如果直接用 self 或者 weakSelf,都不能解决循环引用问题 _link = [CADispla ...