你的位置:首页 > Java教程

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

 ...

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

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