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开发中 用滚动插件来替代浏览器默认的滚动条 在内容不足时 每滚动一次 都会触发相关事件 影响性能 从代码的角度上来说 也是不严谨的

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

 ...

 开始做的时候没觉得是个麻烦事 ，真正做了之后才知道没那么简单...

还有继续优化的地方，等有空了再来改吧

div模拟滚动条

标签：

原文地址：http://www.cnblogs.com/chocho/p/4420430.html