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-top 105 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;//滑动之前的老位置 初始化为0 120 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 // 滚动条变化的值 dirY 134 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-top 161 content.style.marginTop = -bar.offsetTop / ((scrollH - 10) / contentH) + 'px'; 162 } 163 } 164 </script> 165 </body> 166 167 168 </html>