div模拟滚动条

2024-04-27 14:10:57

字体：大中小

来源：转载

供稿：网友

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