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

 ...

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

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

 

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