还是根据我的个人习惯封装了一个方法 setScroll({ box :父盒子DOM对象, content : 内容盒子DOM对象, scrollall : 滚动条大盒子DOM对象, scroll : 滚动条DOM对象, direction:   垂直滚动条还是水平滚动条  })  该方法传入一个object,前四个属性必选,最后一个可选,‘vertical’ || ‘’level"  ,默认vertical. html结构 最大盒子>(内容盒子+(滚动条盒子>滚动条)) 样式自己编写即可。 下来是js源码

0 var setScroll = function(obj){
1  
2 //初始化参数
3 var box = obj.box,
4         content = obj.content,
5         scrollall = obj.scrollall,
6         scroll = obj.scroll;
7         direction = obj.direction || 'vertical';
8  
9     //全局变量记录
10     var startPosition,
11      scrTop = 0,
12      currentTop = 0;
13  
14     //初始化配置参数
15     var getwh,wh,dier,tl,page;
16  
17      if(direction == 'vertical'){
18      getwh = 'offsetHeight';
19      wh = 'height';
20      dier = 'top';
21      tl = 'offsetTop';
22      page = 'pageY';
23      }else{
24      getwh = 'offsetWidth';
25      wh = 'width';
26      dier = 'left';
27      tl = 'offsetLeft';
28      page = 'pageX';    
29      }
30  
31     var boxHeight = box[getwh],
32      contentHeight = content[getwh];
33  
34  
35  
36     //初始化样式
37  
38     scroll.style[wh] = (boxHeight / contentHeight * boxHeight) + 'px';
39  
40  
41 var mousein = function (event){
42  
43 event = event || window.event;
44  
45 var scrTop = event[page] - box[tl] - startPosition;
46  
47 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 
48  
49 scrTop = scrTop < 0 ? 0 : scrTop;
50 scrTop = scrTop > boxHeight - scroll[getwh] ? boxHeight - scroll[getwh] : scrTop;
51  
52 currentTop = -scrTop / boxHeight * contentHeight;
53  
54 scroll.style[dier] = scrTop + 'px';
55  
56 content.style[dier] = currentTop + 'px';
57  
58 }
59  
60  
61     //鼠标按下,开始拖动
62     scroll.addEventListener('mousedown',function(event){
63  
64      event = event || window.event;
65  
66      //记录当前鼠标点击位置距离父盒子顶部的距离
67      startPosition = event.offsetY;
68  
69 document.addEventListener('mousemove',mousein);
70  
71     })
72  
73  
74 document.addEventListener('mouseup',function(){
75  
76 document.removeEventListener('mousemove',mousein,false);
77  
78 })
79  
80 box.addEventListener('mousewheel',boxscroll);
81  
82 box.addEventListener('DOMMouseScroll',boxscroll,false); 
83  
84 function boxscroll(event){
85  
86 event = event || window.event;
87  
88 if(event.wheelDelta){
89  
90 if(-event.wheelDelta / 120 > 0){
91  
92 scrTop = scroll[tl] + -event.wheelDelta / 120 + 4;
93  
94 }else{
95  
96 scrTop = scroll[tl] + -event.wheelDelta / 120 - 4;
97  
98 }
99  
100 }else{
101  
102 if(event.detail / 3 > 0){
103  
104 scrTop = scroll[tl] + event.detail / 3 + 4;
105  
106 }else{
107  
108 scrTop = scroll[tl] + event.detail / 3 - 4;
109  
110 }
111  
112 }
113  
114 currentTop = -scrTop / boxHeight * contentHeight;
115  
116 scrTop = scrTop < 0 ? 0 : scrTop;
117 scrTop = scrTop > boxHeight - scroll[getwh] ? boxHeight - scroll[getwh] : scrTop;
118  
119 currentTop = currentTop > 0 ? 0 : currentTop;
120 currentTop = currentTop < -(contentHeight - boxHeight) ? -(contentHeight - boxHeight) : currentTop;
121  
122  
123 scroll.style[dier] = scrTop + 'px';
124  
125 content.style[dier] = currentTop + 'px';
126  event.preventDefault();
127 }};

在线运行地址可以查看源码分析 scrollJS下载地址

查看原文-摘自大公爵ddamy.com

javascript封装自定义滚动条方法,可自定义四个边框滚动条的更多相关文章

  1. 牛客网Java刷题知识点之字符流缓冲区、BufferedWriter、BufferedReader、BufferedReader-readLine方法原理、自定义MyBufferedReader-read方法、自定义MyBufferedReader-readLine方法

    不多说,直接上干货! 把提高效率的动作,封装成一个对象.即把缓冲区封装成一个对象. 就是在一个类里封装一个数组,能对流锁操作数据进行缓存. 什么是字符流缓冲区? 善于使用字符流缓冲区,减轻负担,提高下 ...

  2. Javascript和jquery事件--滚动条事件和自定义滚动条事件样式

    很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...

  3. Jquery自定义扩展方法(二)--HTML日历控件

    一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看 ...

  4. Jquery自定义扩展方法(一)

    jquery是一款流行的JS框架,自定义JS方法,封装到Jquery中,调用起来也挺方便的,怎么写Jquery扩展方法那,网上翻阅了一部分代码,其实也挺简单的: 方式一: (jQuery.fn.set ...

  5. jqery validate、validate自定义验证方法 + jaery form Demo

    校验规则 required:true  必输字段 remote:"check.php"  使用ajax方法调用check.php验证输入值 email:true  必须输入正确格式 ...

  6. OC中实例变量可见度、setter、getter方法和自定义初始化方法

    在对类和对象有一定了解之后,我们进一步探讨实例变量的可见度等相关知识 实例变量的可见度分为三种情况:public(共有),protected(受保护的,默认),private(私有的),具体的不同和特 ...

  7. Android 自定义View修炼-实现自定义圆形、圆角和椭圆ImageView(使用Xfermode图形渲染方法)

    一:简介: 在上一篇<Android实现圆形.圆角和椭圆自定义图片View(使用BitmapShader图形渲染方法)>博文中,采用BitmapShader方法实现自定义的圆形.圆角等自定 ...

  8. Spring Security验证流程剖析及自定义验证方法

    Spring Security的本质 Spring Security本质上是一连串的Filter, 然后又以一个独立的Filter的形式插入到Filter Chain里,其名为FilterChainP ...

  9. Unity中自定义扩展方法

    问题背景 在使用unity开发过程中,通常会遇到一种情况,比如说给物体重新赋值坐标的问题, Transfrom tran: ,pos_y=,pos_z=; tran.position=new Vect ...

随机推荐

  1. html中给图片添加热点

    <img src="images/index/top1.jpg" width="248" height="512" usemap=&q ...

  2. Java入门基础总结(二)

    判断语句 if else  如下: 1 /*    2                    语法: 3              if(条件) 4              { 5          ...

  3. C#反射的应用【转】

    摘要: 对于反射贫道也是很陌生的,所以趁现在有时间就把反射看了一下,记下笔记!!! 初始听说反射是可以动态的调用程序集,并从中来获取相应的方法和属性,感觉比较神奇,,, 反射的定义:反射(Reflec ...

  4. ftp 解决不能上传问题

    有人建议整个关掉SELinux并且重启,于是我去/etc/selinux/config里面把SELinux给disable了.重启之后,发现可以在/home/sam/test这个文件夹上传了!

  5. 解析word中的表格

    由于word表格的特殊性,其本身中的数据本来就不够完善,不能够很好的知道其具体的合并.跨行的相关属性,表格的单位可能是PT或者是百分比,并且是共存的,为处理带来了一定的负担,本代码实现了一个将Word ...

  6. PHP 提交checkbox表单时 判断复选框是否被选中

    function GetTitleImgPath(){ $titleImgPath = ""; if (isset($_POST["titlecheckbox" ...

  7. 关于Condition Variable的一些思考

    可能大家都使用过condition variable(之后称cv),一些博客也对cv做了介绍,但是有的说的不完全正确,甚至有误导使用者的倾向,其实最合理的使用方式是查阅文档, 如果你英语还ok的话,h ...

  8. struts2中使用ognl表达式时各种符号的使用规则$,#,%

    OGNL表达式struts2标签“%,#,$” 一.什么是OGNL,有什么特点? OGNL(Object-Graph Navigation Language),大概可以理解为:对象图形化导航语言.是一 ...

  9. Linux网络管理——ISO/OSI七层模型

    1. 网络基础 1. 网络基础 1.1 iso/osi七层模型 事前声明: ISO:国际标准化组织 OSI:开放系统互联模型 IOS:苹果操作系统 但是在计算机网络当中,IOS是互联网操作系统,是思科 ...

  10. Firefox中打开DOM Inspector

    一: 二:ctrl+shift+I