div模擬滾動條

 

若是內容有誤，還請留言幫我指出，很是感謝

 

有木有以爲window下瀏覽器默認的滾動條很醜？

特別是在黑色風格的網站中 用iframe嵌套或者overflow：auto 出現滾動條的時候

那麼咱們來模擬一個滾動條吧

 demo01

說明：
    1.content元素不能有border  若是有10px的border 把滾條拖到最下面後 將有10px內容看不到
    2.調用方式：scrollFuc('content','nr','scroll_con','scroll_box');
不足：
    此版本沒有抽象出對scrollBox高度的設置 由於在nr有變化時 將會對scrollBox高度進行再設置 好比ajax請求改變內容

----------------------------------

 demo02

說明：
   	1.content元素不能有border  若是有10px的border 把滾條拖到最下面後 將有10px內容看不到
   	2.此版本抽象出對scrollBox高度的設置 可是調用方式有所改變：
     	scrollFuc('content','nr','scroll_con','scroll_box');//啓動函數
	    scrollBoxH('content','nr','scroll_con','scroll_box');//設置box高度 若是nr有增長或減小 就要再調用這個函數 
不足：
   	在scrollBoxH函數內部 設置了scroll_box的高度後 會重置nr和滾條的位置爲起始位置 在有些狀況下是不合理的（改變了nr後 可是不要還要保持nr和滾條的當前位置）

 

----------------------------------

 demo03

說明：
   	1.content元素不能有border  若是有10px的border 把滾條拖到最下面後 將有10px內容看不到
   	2.此版本抽象出對scrollBox高度的設置 可是調用方式有所改變：
     	scrollFuc('content','nr','scroll_con','scroll_box');//啓動函數
	    scrollBoxH('content','nr','scroll_con','scroll_box');//設置box高度 若是nr有增長或減小 就要再調用這個函數
    3.修改了scrollBoxH函數，調用方式：
        表示不刷新當前位置：
                        scrollBoxH('content','nr','scroll_con','scroll_box',false); 
        表示刷新當前位置（最後的true參數可省略）：
                        scrollBoxH('content','nr','scroll_con','scroll_box',true); 
        表示nr跳至指定位置（即設置nr的top屬性爲-38，當最後的參數爲足夠小時如-99999999 nr會跳至最底部 當最後的參數爲正時會跳至頂部）：
                        scrollBoxH('content','nr','scroll_con','scroll_box',-38); 
不足：
    代碼有點亂 有時間了再來整理

 

----------------------------------

 demo04

說明：
   	1.'content','nr','scroll_con','scroll_box'四個元素都不要能有border!!!
   	2.此版本抽象出對scrollBox高度的設置（根據內容） 可是調用方式有所改變：
     	scrollFuc('content','nr','scroll_con','scroll_box');//啓動函數
	    setScroll('content','nr','scroll_con','scroll_box');//設置box高度 若是nr有增長或減小 就要再調用這個函數
    3.修改了setScroll(scrollBoxH)函數，調用方式：
        表示不刷新當前位置：
                        setScroll('content','nr','scroll_con','scroll_box',false); 
        表示刷新當前位置（最後的true參數可省略）：
                        setScroll('content','nr','scroll_con','scroll_box',true); 
        表示nr跳至指定位置（即設置nr的top屬性爲-38，當最後的參數爲足夠小時如-99999999 nr會跳至最底部 當最後的參數爲正時會跳至頂部）：
                        setScroll('content','nr','scroll_con','scroll_box',-38); 
不足：  
      能夠改成面向對象的形式
      滾動條上下兩個按鈕沒有寫事件（若是有必要的話）；
      不知道用scrollTop寫  會不會更好
      不能設置#content 的border
      傳參形式能夠改成對象的形式更合理
      

----------------------------------

 demo05

說明：
    兼容性：ie6+（混雜模式） Firefox3.6.28+  oprea9.0+  
新版說明：
    簡單封裝了
    參數以對象的形式傳入
不足： 
    還能夠進一步封裝 優化
    在內容不足時 隱藏滾動條
    沒法實現橫向滾動條
      

----------------------------------

 demo06(完整版)  

兼容性：ie6+（混雜模式） Firefox3.6.28+  oprea9.0+ 
說明：
    兼容性：ie6+（混雜模式） Firefox3.6.28+  oprea9.0+ 
    簡單封裝了
    參數以對象的形式傳入
    
新版說明：
    在內容不足時 隱藏滾動條
    添加了水平滾動條的功能
    con nr scon sbox 均可以添加border
    修復了 滾動區域內容不足時 鼠標滾輪不能觸發外層滾動條的滾動事件
    修復了 在子窗口滾動到端點時  沒法觸發父窗口的滾動事件
    
不足：
    內容不足時 沒有註銷相關事件 若是在web開發中 用滾動插件來替代瀏覽器默認的滾動條 在內容不足時 每滾動一次 都會觸發相關事件 影響性能 從代碼的角度上來講 也是不嚴謹的

----------------------------------

 ...

 開始作的時候沒以爲是個麻煩事 ，真正作了以後才知道沒那麼簡單...

還有繼續優化的地方，等有空了再來改吧