js 自制滚动条的小例子


Posted in Javascript onMarch 16, 2013

写了个js自制滚动条,首先,先看一下demo(点击这里) 先

有两个demo,右边那个黑色那个,是我一开始写的比较肤浅的代码:

var scrollself=(function(){
    var scrollblock, //滚动块
        scrollcontent,  //被滚动的内容
        scrollbar,    //滚动条
        scrollpanel,    //滚动内容的滚动区域
        cdistance,  //滚动内容要滚动的距离
        bdistance,    //滚动块要滚动的距离
        minuTop, //滚动条头尾剩下的空白
        cTop,    //滚动内容的top
        startY=0,    //滚动动作开始初鼠标的位置
        bTop=0,    //滚动动作开始初滚动块的top
        isDrag=false;  //是否拉动滚动块

    function prevent(e){
        if(e.preventDefault){
            e.preventDefault();
        }
        if(e.stopPropagation){
            e.stopPropagation();
        }
        e.cancelBubble=true;
        e.returnValue=false;
    }
    function mouseDown(event){
        isDrag=true;
        event=event||window.event;
        startY=event.clientY;
        bTop=scrollblock.offsetTop;
        cTop=scrollcontent.offsetTop;
        // prevent(event);
    }
    function mouseMove(event){
        if(isDrag){
            event=event||window.event;
            var newbTop=event.clientY-startY+bTop,
                newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;
            if(newbTop<minuTop){
                newbTop=minuTop;
                newcTop=0;
            }else{
                if(newbTop>bdistance+minuTop){
                    newcTop=-cdistance;
                    newbTop=bdistance+minuTop;
                }
            }
            scrollblock.style.top=newbTop+'px';
            scrollcontent.style.top=newcTop+'px';
        }else{
            isDrag=false;
        }
        // prevent(event);
    }
    function mouseUp(event){
        isDrag=false;
        // prevent(event);
    }
    function addHandler(){
        scrollblock.onmousedown=mouseDown;
        scrollblock.onmousemove=mouseMove;
        scrollblock.onmouseup=mouseUp;
        document.onmouseup=mouseUp;
    }

    return{
        init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
            scrollblock=document.getElementById(scrollblock_id);
            scrollcontent=document.getElementById(scrollcontent_id);
            scrollbar=document.getElementById(scrollbar_id);
            scrollpanel=document.getElementById(scrollpanel_id);
            minuTop=scrollblock.offsetTop;
            cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
            bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;
            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
            addHandler();
        }
    }

}());
scrollself.init('scrollpanel2','scrollcontent2','scrollbar2','scrollblock2');

之所以说它肤浅,比较一下两个demo的滚动效果就知道了,右边的拉动滚动块时候,体验效果好差,很卡,而左边的就流畅多了。

因为很卡,我就又上网看了一下别人的代码,然后把根据别人的思路把代码改了一下,就有了左边那个绿色的那个demo,很明显,效果好了很多,代码:

var scroll=(function(){
    var scrollblock, //滚动块
        scrollcontent,  //被滚动的内容
        scrollbar,    //滚动条
        scrollpanel,    //滚动内容的滚动区域
        cdistance,  //滚动内容要滚动的距离
        bdistance,    //滚动块要滚动的距离
        minuTop, //滚动条头尾剩下的空白
        cTop,    //滚动内容的top
        startY=0,    //滚动动作开始初鼠标的位置
        bTop=0;    //滚动动作开始初滚动块的top

    function mouseDown(event){
        event=event||window.event;
        startY=event.clientY;
        bTop=scrollblock.offsetTop;
        cTop=scrollcontent.offsetTop;
        if(scrollblock.setCapture){
            scrollblock.onmousemove=doDrag;
            scrollblock.onmouseup=stopDrag;
            scrollblock.setCapture();
        }else{
            document.addEventListener("mousemove",doDrag,true);
            document.addEventListener("mouseup",stopDrag,true);
        }
    }
    function doDrag(event){
        event=event||window.event;
        var newbTop=event.clientY-startY+bTop,
            newcTop=cTop-(event.clientY-startY)/bdistance*cdistance;
        if(newbTop<minuTop){
            newbTop=minuTop;
            newcTop=0;
        }else if(newbTop>bdistance+minuTop){
            newcTop=-cdistance;
            newbTop=bdistance+minuTop;
        }
        scrollblock.style.top=newbTop+'px';
        scrollcontent.style.top=newcTop+'px';
    }
    function stopDrag(event){
        if(scrollblock.releaseCapture){
            scrollblock.onmousemove=doDrag;
            scrollblock.onmouseup=stopDrag;
            scrollblock.releaseCapture();
        }else{
            document.removeEventListener("mousemove",doDrag,true);
            document.removeEventListener("mouseup",stopDrag,true);
        }
        scrollblock.onmousemove=null;
        scrollblock.onmouseup=null;
    }
    return{
        init:function(scrollpanel_id,scrollcontent_id,scrollbar_id,scrollblock_id){
            scrollblock=document.getElementById(scrollblock_id);
            scrollcontent=document.getElementById(scrollcontent_id);
            scrollbar=document.getElementById(scrollbar_id);
            scrollpanel=document.getElementById(scrollpanel_id);
            minuTop=scrollblock.offsetTop;
            cdistance=scrollcontent.offsetHeight-scrollpanel.offsetHeight;
            bdistance=scrollbar.offsetHeight-minuTop*2-scrollblock.offsetHeight;
            scrollblock.onmousedown=mouseDown;
            enclose(scrollpanel,scrollcontent,scrollbar,scrollblock,bdistance,cdistance,minuTop);
        }
    }
}());
scroll.init('scrollpanel','scrollcontent','scrollbar','scrollblock');

比较了一下两个的代码,其实修改的不多,就有一点很大的不同,流畅的那一个(左边绿色那一个)多了这个东西——setCapture、releaseCapture。

具体是怎样的,再研究一下先。

Javascript 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
Dec 04 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 #Javascript
js加强的经典分页实例
Mar 15 #Javascript
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 #Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 #Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 #Javascript
JavaScript 函数replace深入了解
Mar 14 #Javascript
JS异常处理的一个想法(sofish)
Mar 14 #Javascript
You might like
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
Superdry极度干燥美国官网:英国制造的服装品牌
2018/11/13 全球购物
小学教师师德承诺书
2014/05/23 职场文书
小学班主任个人总结
2015/03/03 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
转正申请报告格式
2015/05/15 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
python 详解turtle画爱心代码
2022/02/15 Python