?1 <!DOCTYPE html> ?2 <html lang="en"> ?3 <head> ?4 ??5 ????<style type=‘text/css‘> ?6 ??7 ????????html{ ?8 ????????????????overflow: hidden; ?9 ????????????} 10 ?11 #scroll{ 12 ????????????width: 800px; 13 ????????????margin: 100px auto; 14 ????????????padding: 10px 30px 10px 10px; 15 ????????????border: 1px solid #ccc; 16 ????????????border - radius: 4px; 17 ????????????height: 500px; 18 ????????????overflow: hidden; 19 ????????????position: relative; 20 ????????} 21 #scroll-bar{ 22 ????????position:absolute; 23 ????????????width:10px; 24 ????????????left: 0px; 25 ????????????top: 0px; 26 ????????????border-left: 1px solid #ccc; 27 ????????????border-radius: 4px; 28 ????????} 29 #bar{ 30 ????????????width:10px; 31 ????????????border-top: 1px solid #ccc; 32 ????????????border-bottom: 1px solid #ccc; 33 ????????????border-radius: 4px; 34 ????????????background-color: #ccc; 35 ????????} 36 ????</style> 37 </head> 38 <body> 39 ????<div id = ‘scroll‘> 40 ????????<div id=‘content‘> 41 ????????????<p> 42 ????????????????<p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows: 43 0; orphans:0; font-size:12pt"> 44 ????????????????<span style="font-family:‘‘微软雅黑‘‘"> 45 ?????????????????我们不可以借口发展经济而污染环境。 ?46 ????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 47 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?48 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?49 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?50 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?51 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?52 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?53 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 54 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 55 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 56 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?57 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 58 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 59 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?60 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?61 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 62 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?63 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?64 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?65 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?66 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?67 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?68 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?69 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?70 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?71 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?72 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?73 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 74 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?75 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?76 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?77 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?78 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?79 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 80 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?81 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?82 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?83 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 84 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 85 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?86 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 87 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?88 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?89 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?90 ?????????????????我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 我们不可以借口发展经济而污染环境。 ?91 ?????????????????我们不可以借口发展经济而污染环境。 92 ????????????????（on the pretence of） 93 ????????????????</span> 94 ????????????????</p> 95 ????????????????<p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; widows:0; orphans:0; font-size:12pt"><span style="font-family:‘‘微软雅黑‘‘"> </span></p> 96 ????????????</p> 97 ????????</div> 98 ????????<div id=‘scroll-bar‘> 99 ??????????????<div id = ‘bar‘></div>100 ????????</div>101 ????</div>102 103 ??????????<script type = ‘text/javascript‘>104 ????????????// 原理就是 框体有大小，内容无大小，框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离，再换算成 内容-margin-top105 ????????????window.onload = function(){106 ????????????????var scroll = document.getElementById(‘scroll‘);107 ????????????????var content = document.getElementById(‘content‘);108 ????????????????var scrollBar = document.getElementById(‘scroll-bar‘);109 ????????????????var bar = document.getElementById(‘bar‘);110 ????????????????var scrollH = scroll.offsetHeight;111 ????????????????var contentH = content.offsetHeight;112 ????????????????// 滚动条框 和框体的高度是一样的113 ????????????????scrollBar.style.height = scrollH + ‘px‘;114 ????????????????// 开始我想用right的,但是ie7 不兼容 ?115 ????????????????scrollBar.style.left = scroll.offsetWidth - 12 + ‘px‘;116 ????????????????// 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学);117 ????????????????bar.style.height = scrollH * (scrollH / contentH) + ‘px‘;118 ????????????????var isMove = false;//是否开启滑动119 ????????????????var oldY = 0;//滑动之前的老位置 初始化为0120 ????????????????bar.onmousedown = function(event){121 ????????????????????var event = event || window.event;122 ????????????????????oldY = event.clientY;123 ????????????????????isMove = true;124 ????????????????????????????return false;125 ????????????????} ??????126 ????????????document.onmouseup ?= function(){127 ????????????????isMove = false;128 ????????????????return false;129 ????????????}130 ????????????document.onmousemove = function(event){131 ????????????????var event = event || window.event;132 ????????????????if (isMove) {133 ????????????????????// 滚动条变化的值 dirY134 ????????????????????var dirY = event.clientY - oldY;135 ????????????????????goOn(dirY);136 ????????????????????oldY = event.clientY;137 ????????????????}138 ????????????}139 ????// 滚动事件140 ????scroll.onmousewheel = function(event)141 ????{142 ????????var event ?= event || window.event;143 ????????// event.wheelDelta 每次滚动都是+-120 ?这里设置一个系数 120 太大了更适合浏览器的滚动144 ????????goOn(-event.wheelDelta * 0.2);145 ????????return false;146 ????}147 ????function goOn(dirY)148 ????{149 ????????// 滚动条滚动150 ????????bar.style.marginTop = bar.offsetTop + dirY + ‘px‘;151 ????????// 越界处理152 ????????if (bar.offsetTop < 0)153 ????????{154 ????????????bar.style.marginTop = ‘0px‘;155 ????????}156 ????????if ((bar.offsetTop + bar.offsetHeight) > scrollBar.offsetHeight)157 ????????{158 ????????????bar.style.marginTop = scrollBar.offsetHeight - bar.offsetHeight + ‘px‘;159 ????????}160 ????????// 内容框的margin-top161 ????????content.style.marginTop = -bar.offsetTop / ((scrollH - 10) / contentH) + ‘px‘;162 ????}163 }164 ????</script>165 </body>166 167 168 </html>js自定义滚动样式
原文地址：https://www.cnblogs.com/weiyf/p/8568229.html