《SmartJs系列》屌丝逆袭，华丽转身，解读自定义ScrollBar（一）

最近项目中频频遇到ScrollBar(滚动条)，若是document的ScrollBar还可以容忍，关键是内部Div也有。下载个插件吧，显得太业余(原谅我吧，其实手很白)，思索再三，自己搞一个吧。OK，接下来的时间，现场观众们跟我一起嗨起来。。。NO,NO,还是跟我一起看一下吧。

一、首先呢，我有一个Div，这个Div不得了，里面内容太多太多，so，我设置了overflow-y:auto;

200px;
height:150px;
padding:10px;
line-height:1.5;
overflow-y:auto;
font-size:13px;
color:blue;
border:1px solid #bbb

二、基于原有Div，构造新的自定义结构__《DOM操作》

 

图中所示：① 为原始Div，我们需要更改一下它的CSS，position为relative，overflow为hidden;

　　　　　② 是我们新建的一个Div，它里面的内容是 原始Div里面的内容，position为absolute; 这里有一点需要注意的地方，原始div有padding的时候，需要处理一下，另外设置宽高时还需要考虑一下ScrollBar所占的宽度。高度就无所谓了，适应就行。

　　　　　③ 这个就是我们ScrollBar的背景了，高度需要考虑border，这些大家都可以自己亲手试一下。

　　　　　④ 这个是主角，我习惯叫它ControlBar(控制条)，Bar和Bra是不一样的，当然大家完全可以把它作为Bra看待。它的高度是由 ② 和 ① 的高度比算出来的。

三、MouseWheel  (鼠标滚动)

　　MouseWheel是有兼容性问题的，这个想必大家都知道，我贴下我的代码，有更好的欢迎交流，Tips：项目中引用了JQ，所贴代码仅供参考，当然我没有用JQ滚动插件。

function mouseWheel (obj ,fn) {
                var scrollfn = function(e){ 
                    var direct = 0,
                    e = e || window.event; 
                    if( e.wheelDelta ){ 
                        direct = - e.wheelDelta / 120; 
                    }
                    else if( e.detail ){
                        direct = e.detail / 3; 
                    } 
                    fn( direct );
                    if( jQuery.browser.mozilla ){ 
                        e.preventDefault();
                    }
                    else {
                        e.returnValue = false ;
                    }    
                } 
            
                if(document.addEventListener){ 
                    obj.addEventListener('DOMMouseScroll',scrollfn,false); 
                }
                obj.onmousewheel = scrollfn;

　　MouseWheel的时候我们需要做的就是改变②的top值 , 这里的可移动高度啊，什么的需要大家自己计算一下，切记不可将此移动单位定死，建议每次滚动①高度的一半。

　　MouseWheel的时候同时需要改变的还有④的top值，至于每次滚动改变多少，还是那句话，计算所得。

　　值得注意的是临界点的处理，我的方法是：

　　　　可移动px  <  移动单位  ？ 可移动px ： 移动单位 

　　也就是说Div不够再移动一次了，否则就出界了，那么我们灵活的把移动单位更改为 可移动的px。 这个方法同时适用 ② 和 ④ 的处理 ;

　　总结一下：MouseWheel的知识点在兼容上，还有临界点的处理，这个还有其他方法，以上所述个人觉得是最直观，最简单的。如果是原生JS的话，可能还需要写一个简单的运动框架，否则体验不到过程。

 

　　2013-08-13 22:31:58 今天是国产情人节，本着早睡早起的好习惯，博主就先就寝了，接下来会继续剖析自定义ScrollBar，

　　声明一下，博主注重实用性，而非简单实现效果，所以你懂的，接下来更精彩。。。