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>
