做了一个小demo，属于常见的页面布局应用，适用于IE7+,Chrome,safari,Firefox,Opera，其他浏览器没有测试。应该还有很多小问题，不过这里仅仅是一个小demo，如果有发现一些小问题，可以和我交流，互相学习学习。以下是所有代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
7 <style>
8 html,body {
9 height: 100%;
10 overflow: hidden;
11 }
12 body {
13 margin: 0;
14 }
15 #top {
16 width: 100%;
17 height: 80px;
18 background: purple;
19 position: fixed;
20 z-index: 1;
21 }
22 #wrap {
23 width: 100%;
24 height: auto;
25 background: #ccc;
26 position: relative;
27 top: 80px;
28 }
29 .item{
30 width: 100%;
31 height: 400px;
32 margin: 0 auto;
33 font-family: "Microsoft yahei";
34 font-size: 100px;
35 text-align: center;
36 line-height: 400px;
37 color: #fff;
38 }
39 .item1{
40 background: #FFB806;
41 }
42 .item2 {
43 background: #FF4E53;
44 }
45 .item3 {
46 background: #3FB470;
47 }
48 .item4 {
49 background: #08559D;
50 }
51 .item5 {
52 background: #FEE006;
53 }
54 #down {
55 width: 100%;
56 height: 280px;
57 background: #333;
58 }
59 #scroll {
60 width: 15px;
61 height: 100%;
62 position: fixed;
63 right: 0;
64 top: 0;
65 z-index: 100;
66 background: url(image/scrollbg.jpg) repeat-y;
67 }
68 #scrollbar {
69 width: 12px;
70 height: 100px;
71 background: url(image/scrollbar.png) no-repeat;
72 position: absolute;
73 left: 1px;
74 top: 0;
75 }
76 </style>
77 <script>
78 window.onload = function(){
79 /*
80 IE8以下不支持querySelector选择器，需要处理一下IE兼容性
81 var scroll = document.querySelector(".scroll");
82 var scrollbar = document.querySelector(".scrollbar");
83 */
84
85 var top = document.getElementById("top");
86 var wrap = document.getElementById("wrap");
87 var scroll = document.getElementById("scroll");
88 var scrollbar = document.getElementById("scrollbar");
89
90 // 计算页面高度
91 var topH = top.offsetHeight; // 80
92 var wrapH = wrap.offsetHeight; // 2280
93 var total = topH + wrapH; // 2360
94
95 // 计算滚动条高度
96 var scrollH = document.body.clientHeight || document.documentElement.clientHeight; // 可视区高度
97 var scrollbarH = scrollbar.offsetHeight; //100
98
99
100 // 滚动条拖拽
101 var downY=barTop=disY=iScale=0;
102 scrollbar.onmousedown = function(event){
103
104 var e = event || window.event;
105 downY = e.clientY;
106 barTop = parseFloat(getStyle(scrollbar,‘top‘));
107
108 document.onmousemove = function(event){
109
110 var e = event || window.event;
111 var nowY = e.clientY;
112 disY = nowY - downY;
113 var rangeY = barTop + disY;
114 if(rangeY <=0){
115 scrollbar.style.top = 0 + ‘px‘;
116 wrap.style.top = 80 + ‘px‘;
117 }else if(rangeY >= scrollH-scrollbarH){
118 scrollbar.style.top = scrollH-scrollbarH + ‘px‘;
119 }else{
120 scrollbar.style.top = rangeY + ‘px‘;
121 iScale = parseFloat(getStyle(scrollbar,‘top‘))/(scrollH-scrollbarH);
122 wrap.style.top = 80 + (80 + scrollH -total)*iScale + ‘px‘;
123 }
124 }
125 document.onmouseup = function(){
126 document.onmousemove = null;
127 document.onmouseup = null;
128 }
129 return false;
130 }
131
132 // 浏览器窗口重置，需要重新计算滚动条的滚动比例和位置
133 window.onresize = function(){
134 scrollH = document.body.clientHeight || document.documentElement.clientHeight;
135 scrollbar.style.top = iScale*(scrollH-scrollbarH) + ‘px‘;
136 }
137 }
138 function getStyle(obj,attr){
139 if(obj.currentStyle){
140 return obj.currentStyle[attr];
141 }else{
142 return getComputedStyle(obj,false)[attr];
143 }
144 }
145 </script>
146 </head>
147 <body>
148 <header id="top"></header>
149 <section id="wrap">
150 <div class="item item1">item1</div>
151 <div class="item item2">item2</div>
152 <div class="item item3">item3</div>
153 <div class="item item4">item4</div>
154 <div class="item item5">item5</div>
155 <footer id="down"></footer>
156 </section>
157
158 <!--滚动条设置-->
159 <div id="scroll">
160 <div id="scrollbar"></div>
161 </div>
162 </body>
163 </html>
源文件链接：http://pan.baidu.com/s/1slMPPaX
时间： 2024-10-26 18:43:23