在页面制作中,开发人员会各种偷懒(我本人就很懒),觉得能用原生的就用原生的,否则会很麻烦。最后还是会被追求美感的设计师抓住不放。经常听到‘怎么没有做成设计图上的样子呢..这个自带的滚动条多丑呀,必须要做成设计图上的样子...”通常这种情况我会先跟设计解释下,原生的怎么怎么好用,尽量说服他们。有时会碰到一些有执念的设计师(身负洪荒之力惹不起),我就只能坐下来嗷嗷的写代码了。
今天先记录一下自定义滚动条的效果。
思考:滚动条的原理。
1、内容可显示区高度:内容的实际高度=滑块高度:滚动条高度。绿色对应是已知的值,通过这个相等的比例,计算出“滑块高度”。判断是否有滚动条,如滑块的高度〉=内容可以滚动的最大高度,则隐藏滚动条。给滑块定义一个最小值,如果滑块高度小于最小值,则把最小值赋给滑块。
2、滑块的滚动距离:滑块的最大滚动距离=内容的滚动距离:内容的最大滚动距离。同样绿色的已知的,通过这个比例,计算出‘文本对应的滚动距离’。
如果写成方法的话,我需要三个参数,添加滚动条的盒子ID、包裹内容的盒子ID、滚动条盒子ID。(其实只要第1个参数就够了,只是我觉得3个js获取会比较方便,还有就是children这个属性不兼容IE7/8,当页面里加<!--注释-->这种注释时,在IE7/8中获取出来的东东,就不是你想要的那样了。我也懒得再去写一段代码了。)
首先,把布局搞出来。给