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/ ...

随机推荐

AppCan 双击返回按钮退出应用
使用AppCan开发手机应用,拦截返回键实现自定义2秒内双击退出应用的操作 var c1c = 0; window.uexOnload = function(type){ uexWindow.setR ...
POJ 1118 Lining Up
枚举,排序. 先将所有点按双关键字排序,然后枚举线的顶点$P$,剩余的点以$P$为中心进行极角排序,可以取个$gcd$,这样一样的点就排在一起了,然后统计一下更新答案. #pragma comment ...
Conversion to Dalvik format failed with error 1（android）
1.如果不修改android sdk版本,则使用project clean 命令作用于某工程即可. (该处理方式只是在高版本中兼容了低版本工程,未真正意义上的升级) 2.如果修改android sdk ...
reposync 同步yum仓库
reposync 同步远程yum仓库到本地 OPTIONS -h, --help 显示帮助 -c CONFIG, --config=CONFIG ...
LeetCode #3. Longest Substring Without Repeating Characters C#
Given a string, find the length of the longest substring without repeating characters. Examples: Giv ...
win10 Qt 调试器未设置
安装win10后一直用vs调试,没有用qt调试,这次启动调试,发现提示调试器未设置. 解决办法: 需要重新安装wdk 10 https://developer.microsoft.com/zh-cn/ ...
Finish and error to: Error Domain=NSURLErrorDomain Code=-1001 "请求超时。
错误显示:Finish and error to: Error Domain=NSURLErrorDomain Code=-1001 "请求超时." UserInfo={NSUnd ...
java之String类型
一:定义 String是复杂类型,是特殊的复杂类型. 二:创建两种创建形式: String s = "abc"; String s = new String("abc& ...
Oracle sql 中的字符（串）替换与转换[转载]
1.REPLACE 语法:REPLACE(char, search_string,replacement_string) 用法:将char中的字符串search_string全部转换为字符串repla ...
为什么把单一元素的数组放在一个struct的尾端问题
问题摘自<深度探究c++对象模型>: struct mumble { /* stuff */ char pc[ 1 ];};[sizeof(mumble)是一个字节 .pc则代表的是指向这 ...

js自定义的简易滚动条

js自定义的简易滚动条的更多相关文章

随机推荐

热门专题