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/ ...
随机推荐
- redis介绍。
1. Redis是什么 这个问题的结果影响了我们怎么用Redis.如果你认为Redis是一个key value store, 那可能会用它来代替MySQL;如果认为它是一个可以持久化的cache, 可 ...
- hdu 3410 Passing the Message(单调队列)
题目链接:hdu 3410 Passing the Message 题意: 说那么多,其实就是对于每个a[i],让你找他的从左边(右边)开始找a[j]<a[i]并且a[j]=max(a[j])( ...
- 向量相加CUDA练习
#include<string.h> #include<math.h> #include<stdlib.h> #include<stdio.h> #de ...
- HTML1高级
HTML头部 一.链接在新窗口打开如果要定义整个网页的链接在新窗口打开,只要在/head里定义/base target="_blank"就可以了</p> 二.文档描述1 ...
- List集合分页显示
package com.mshc.util; import java.util.Arrays; import java.util.Collections; import java.util.List; ...
- 迅雷Vip账号共享器（持续更新）
更新日期:2016.5.19 下载地址:https://pan.baidu.com/s/1jIya6My 软件界面: 软件界面: 下载地址:http://pan.baidu.com/s/1pJI47j ...
- sql convert() 函数
convert: 时间格式转换为其他时间格式的函数 CONVERT ( data_type [ ( length ) ] , expression [ , style ] ) data_type: ...
- python学习day2
一.模块初识 python模块 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用 ...
- 数据库及SQL优化
一.数据库结构的设计 如果不能设计一个合理的数据库模型,不仅会增加客户端和服务器段程序的编程和维护的难度,而且将会影响系统实际运行的性能.所以,在一个系统开始实施之前,完备的数据库模型的设计是必须的. ...
- Java中三种常见的注释(注解) Annotation
Java为我们提供了三种Annotation方便我们开发. 1 Override-函数覆写注解 如果我们想覆写Object的toString()方法,请看下面的代码: class Annotation ...