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開發中 用滾動插件來替代瀏覽器默認的滾動條 在內容不足時 每滾動一次 都會觸發相關事件 影響性能 從代碼的角度上來說 也是不嚴謹的

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

 ...

 開始做的時候沒覺得是個麻煩事 ，真正做了之后才知道沒那么簡單...

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