当我们给元素加上飞越：汽车；的时候，就会出现滚动条，然而浏览的不同，滚动条的样式大不一样，有些甚至非常丑。

于是就想着自己写一个滚动条，大概需要弄清楚一下这几个点：

1、滚动条酒吧是根据内容的多少，高度不一样的，这个需要动态的计算

2、滚动条酒吧的顶端位置和内容scrollTop的关系。

思路：

使用嵌套的布局，如下：

！DOCTYPE html html head meta charset=' utf-8 ' title/title style type=' text/CSS ' * { padd : 0；保证金： 0；} .包装{宽度： 400像素高度： 400像素；border: 2px实心深粉色；margin: 0自动飞越：隐藏；相对位置：} .盒子-中间{高度： 100%；飞越：汽车；宽度： 200%;} .盒子{宽度： 50%；} .bar { background: # 000宽度： 10px绝对位置：top : 0；右： 0；} .s1 {高度： 400px背景：粉色；} .s2 {高： 400px背景：深粉色；} . S3 { height : 400 pxbackground : deepsky blue }/style/head body div class=' wrap ' id=' wrap ' div class=' box-middle ' id=' box mille ' div class=' box ' id=' content ' div class=' S1 '内容1/div div class='s2 '内容2/div div class='s3 '内容3/div/div/div class=' bar ' id=' bar '/div/div/body/html换行为最外层，给溢出：隐藏；

盒子中间是中间层，也是有滚动条的一层，可以宽度给多一点，这样就看不见滚动条了。

包厢就是内容层，通过js，计算使得包厢的宽度和包保持一致，这样就完全看不见滚动条了

酒吧为滚动条

写射流研究…之前，首先要弄懂一下三个属性：

偏置高度：高度填充边框高度：高度填充边框高度：内容的高度（所有子元素高度和)划水1、计算比例：

酒吧的高度/包装的高度包装的高度/包装内容部子元素的高度和；此时忽略包的填充：0

酒吧的顶部/包装的scrollTop=包装的高度/包装内容部子元素的高度和；

需要注意，当比例的值小于一的时候，说明这个时候没有出现滚动条。

知道算法之后，写代码就简单很多，普通版代码如下：

var $ wrap=文档。getelementbyid(' wrap ')；var $ Boxmille=文档。GetElementByID(' Boxmile ')；var $ content=document。getelementbyid(' content ')；var $ bar=文档。getelementbyid(' bar ')；$内容。风格。width=$ wrap。客户端宽度' px '；//内容的宽度var rate=$ Boxmille。客户身高/$ Boxmille。滚动高度；//滚动条高度的比例，也是滚动条顶端位置的比例var bar height=rate * $ Boxmille。客户身高；//滚动条的酒吧的高度如果(速率1){ //需要出现滚动条，并计算滚动条的高度$ bar。风格。高度=条形高度' px '；}else{ //不需要出现滚动条$ bar。风格。显示='无'；} $ Boxmille。on roll=function(e){ console。日志(' offsetHeight ' this。右偏)；//高度填充边框控制台。日志('客户端高度'这个。客户端高度)；//高度填充控制台。log('滚动高度'这个。滚动高度)；//内容的高度（所有子元素高度和)填充控制台。日志(这个。scroll top)；$ bar。风格。top=这个。滚动顶部*速率“px”；}使用面向对象版：

函数滚动条(opt){ var me=this；我$ wrap=文档。getelementbyid(opt。包裹)；我$ Boxmille=文档。GetElementBYID(opt。box mille)；我$ content=文档。getelementbyid(opt。内容)；我$ bar=文档。getelementbyid(opt。bar)；我。init()；我$ Boxmille。on roll=function(e){//console。日志(' offsetHeight ' this。右偏)；//内容填充边框//控制台。日志('客户端高度'这个。客户端高度)；//内容填充//控制台。log('滚动高度'这个。滚动高度)；//内容的高度填充控制台。日志(这个。scroll top)；我。卷轴玩具(这个。滚动顶部*我。速率)} }滚动条。原型。init=function(){ this .$content.style.width=this .$ wrap.clientWidth ' px//内容的宽度这个比率=这个$ Boxmille . client height/this .$ boxMidle.scrollHeight//滚动条高度的比例，也是滚动条顶端位置的比例这个. barHeight=这个。费率*这个$ boxMidle.clientHeight//滚动条的酒吧的高度if(this.rate 1){ //需要出现滚动条，并计算滚动条的高度这个$ bar。风格。高度=这个。条形高度“px”；}else{ //不需要出现滚动条这个$ bar。风格。显示='无'；} }滚动条。原型。滚动玩具=功能(y){ if(this。等级1){这个.$ bar。风格。top=y ' px} } var obj=新滚动条({ ' wrap ' : ' wrap '，' boxMidle ' : ' boxMidle '，' content':'content '，' bar ' : ' bar ' })；最后看一下效果：

虽然效果很丑，但是可控，自己调一下就可以了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。