自定义滚动条

在页面制作中，开发人员会各种偷懒（我本人就很懒），觉得能用原生的就用原生的，否则会很麻烦。最后还是会被追求美感的设计师抓住不放。经常听到‘怎么没有做成设计图上的样子呢..这个自带的滚动条多丑呀，必须要做成设计图上的样子...”通常这种情况我会先跟设计解释下，原生的怎么怎么好用,尽量说服他们。有时会碰到一些有执念的设计师（身负洪荒之力惹不起），我就只能坐下来嗷嗷的写代码了。

今天先记录一下自定义滚动条的效果。

思考：滚动条的原理。

1、内容可显示区高度：内容的实际高度＝滑块高度：滚动条高度。绿色对应是已知的值，通过这个相等的比例，计算出“滑块高度”。判断是否有滚动条，如滑块的高度〉＝内容可以滚动的最大高度，则隐藏滚动条。给滑块定义一个最小值，如果滑块高度小于最小值，则把最小值赋给滑块。

2、滑块的滚动距离：滑块的最大滚动距离＝内容的滚动距离：内容的最大滚动距离。同样绿色的已知的，通过这个比例，计算出‘文本对应的滚动距离’。

如果写成方法的话，我需要三个参数，添加滚动条的盒子ID、包裹内容的盒子ID、滚动条盒子ID。（其实只要第1个参数就够了，只是我觉得3个js获取会比较方便，还有就是children这个属性不兼容IE7/8，当页面里加<!--注释-->这种注释时，在IE7/8中获取出来的东东，就不是你想要的那样了。我也懒得再去写一段代码了。）

首先，把布局搞出来。给