JS模擬滾動條

滾動條模擬實在基本JS拖拽基礎上的加深。

滾動條需要做的是1.滾動條的拖拽，以及內容滾動高度的改變。2.上下按鈕點擊效果以及內容高度改變。3.鼠標滾輪在內容中滾動時內容高度改變，以及滾動條的高度改變。

我把這種模擬滾動條分成兩類，一類是內容屬性為overflow：hidden的，重點在於上文所說的第三點，如果是hidden屬性的話，滾輪在頁面內容里滾動是不會觸發onscroll事件的，需要給鼠標滾輪綁定事件，而鼠標滾輪事件在IE中是onmousewheel，在DOM中是DOMMouseScroll，后者還需要addEventListener來添加，非常的麻煩，這里第二種更加簡單易於理解的方法。第二類就是overflow：scroll的，當然只是在JS中內容超過高度或者寬度了再設置X，或Y方向的scroll。這種方法在內容框邊上會有個自動生成的滾動條，你可以用背景，或者用你自己做的滾動條樣式覆蓋上去，這種方法的話上文說的第三點只需要在內容中綁定onscroll事件即可，不必處理瀏覽器的兼容性。

html：

<div id="news_list" style="height:300px; overflow:hidden">
                <div class="news_content" style="height:500px;">
                 內容
                </div>
            </div>
            <div id="scroll" style="display:none">
                <div class="scroll_bar"></div>
                <div class="scroll_prev"></div>
                <div class="scroll_next"></div>
            </div>

為了方便，在選取對象過程中，我直接用了children[i]這種方法，如果大家的html有變化的話，需要改動里面的i值

function scroll(id,id2){
    var obj=document.getElementById(id);
    var list=document.getElementById(id2);
    list.scrollTop=0;
    var oUl=list.children[0];
    var bar=obj.getElementsByTagName("div")[0];
    var prev=obj.getElementsByTagName("div")[1];
    var next=obj.getElementsByTagName("div")[2];
    if(oUl.offsetHeight>list.offsetHeight){
        obj.style.display='block';
        list.style.overflowY='scroll';
        //按比例設置滾動條長度
        bar.style.height=Math.floor(obj.offsetHeight*list.offsetHeight/oUl.offsetHeight)+'px';
        bar.style.overflow='hidden';
        //拖拽滾動條事件加載
        bar.onmousedown=function(ev){
            var o=this;
            var oEvent=ev||event;
            var y=oEvent.clientY-this.offsetTop;
            document.onmousemove=function(ev){
                oEvent=ev||event;
                var otop=oEvent.clientY-y;
                var stop=otop*oUl.offsetHeight/obj.offsetHeight;
                if(otop<=0){
                    o.style.top=0+'px';
                    list.scrollTop=0;
                }else if(otop>=obj.offsetHeight-bar.offsetHeight){
                    o.style.top=obj.offsetHeight-bar.offsetHeight+'px';
                    list.scrollTop=oUl.offsetHeight-list.offsetHeight;
                }else{
                    o.style.top=otop+'px';
                    list.scrollTop=stop;
                }
            }
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }
        }
        //向上按鈕事件加載
        prev.onmousedown=function(){
            if(bar.offsetTop>0){
                var move=setInterval(function(){
                    if(bar.offsetTop-obj.offsetHeight*0.02>0){
                        bar.style.top=bar.offsetTop-obj.offsetHeight*0.02+'px';
                        list.scrollTop=list.scrollTop-oUl.offsetHeight*0.02;
                    }else{
                        clearInterval(move);
                        bar.style.top=0+'px';
                        list.scrollTop=0;
                    }
                },100);
                prev.onmouseup=function(){clearInterval(move);}
            }
        }
        //向下按鈕事件加載
        next.onmousedown=function(){
            if(bar.offsetTop<obj.offsetHeight-bar.offsetHeight){
                var move=setInterval(function(){
                    if(bar.offsetTop+obj.offsetHeight*0.02<obj.offsetHeight-bar.offsetHeight){
                        bar.style.top=bar.offsetTop+obj.offsetHeight*0.02+'px';
                        list.scrollTop=list.scrollTop+oUl.offsetHeight*0.02;
                    }else{
                        clearInterval(move);
                        bar.style.top=obj.offsetHeight-bar.offsetHeight+'px';
                        list.scrollTop=oUl.offsetHeight-list.offsetHeight;
                    }
                },100);
                next.onmouseup=function(){clearInterval(move);}
            }
        }
        //鼠標滾輪事件加載
        list.onscroll=function(){
            bar.style.top=list.scrollTop*obj.offsetHeight/oUl.offsetHeight+'px';
        }
    }
}

使用方法：

scroll("scroll","news_list");

這只是個易於理解的版本，還有很多可以優化的地方，不如說可以在一開始就求出滾動條和頁面的比例值，這樣就不用后面反復的計算它們的比例來求另一個的值了。