首先声明这个办法不是我原创.但我在其他的地方没见到过,所以这里写出来大家共享.
web写多了有时候可能会用到单条的滚动条.怎么办?自己写一个吗?好麻烦,而且滚动条里面的滑块是动态变的.这里有一个简单的办法,用DIV来模拟.
关键原理:DIV里面的内容超出DIV的尺寸后,如果这个DIV设置的overflow是scroll,那么就会出现滚动条.好!滚动条你别动,我们就要你了.
根据这个原理,我们可以这样做:
1,创建一个层,如果你要横向的滚动条,则设置style的overflow-x为scroll,overflow-y为hidden.反之,纵向的话就是
style的overflow-y为scroll,overflow-x为hidden;
设定层的宽或者高为你想要的滚动条长度.然后向对应的设置高或者宽为0px;唉,我讲话大家估计听不明白,简单讲~就是把DIV拖成只剩下滚动条就对了,怎么拖?呵呵,系在马屁股上拉出去跑就是了.
2.在DIV里面放一个水平线,(如果你需要横向滚动条),size为0.如果要垂直方向的那就放一个宽度为0的DIV吧.
3.这样,这个DIV就可以那来当滚动条用了,具体用的时候我们只要把里面的水平线或者宽度为0的DIV的宽或者高设置成你要滚动的对像的scrollHeight就可以了,当然,这样的滚动条还不会有效果.我们要在模拟的滚动条的DIV上加onscroll事件,把这个DIV的scrollTop/scrollLeft同步给你要真正拖动的对象就可以了.
4.最后讲点不好的地方:这个模拟的DIV再怎么小也不会只剩下滚动条,也就是还会保留一点空白的空间,放在单元格里就看的很清楚了.所以用在其他层下面应该没问题(设置一个小一点的Z-Index就可以被遮挡住了).权当一种办法吧,有能力有时间还是自己写,封装一个的好.