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/ ...
随机推荐
- ios开发之简单实现loading动画效果
最近有朋友问我类似微信语音播放的喇叭动画和界面图片加载loading界面是怎样实现的,是不是就是一个gif图片呢!我的回答当然是否定了,当然不排除也有人用gif图片啊!下面我就来罗列三种实现loadi ...
- ps遇到的问题及笔记
1. ps软件图层面板中不显示缩略图 打开软件后,任意打开一个文件,再打开图层面板(直接按F7也可),点图层面板右上角的小三角后有一个新的面板出现,点下面的"面板选项"弹出一个面板 ...
- vb.net 结束进程
Public Class Form1 Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click ...
- 安卓用canvas画曲线图
1.新建一个常变量类Constant.java package com.rain.db; import android.graphics.Point; public class Constant { ...
- MyEclipse2014拷贝web工程
z哎myeclipse2014中,复制web项目 Ctrl+C复制原项目Ctrl+V粘贴并输入新的项目名称项目名 ---> 右键 ---> propertes ---> MyEcli ...
- mongodb 性能提高之利用索引， 待续
> 10 , 用户无法忍受 >1s , 需要加装中提示 数据库对软件整体影响是不言而喻的, 那么使用 MOngoDB时 该如何提高数据库性能 第一: 索引, 相当于记忆法的 地点桩 1. ...
- 寒假学干货之------LinearLayout.layout.weight
所有原始代码由这个大神写的--http://www.cnblogs.com/zhangs1986/archive/2013/01/17/2864237.html layout/activity_mai ...
- log4j.properties全配置 （转）
###############################log4j.properties############################### ##### Global Log Leve ...
- @Scheduled(cron = "0 0 * * * ?")实现定时任务
//每一个小时执行一次 @Scheduled(cron = "0 0 * * * ?") public void saveDailyScoreScheduled() { try { ...
- usaco 17.Jan 铜组T3
上午在打usaco月赛的铜组题,T1T2是用来秒杀的,然而T3卡了一上午,下面给出题面: 题意大概就是输入一个N*N的矩阵,矩阵中元素只有0与1两种状态,每次操作以左上角的点为矩阵中某一矩阵的左上方顶 ...