有关页面滚动条的总结 

  1 <body scroll=no>  
  2 
  3 去掉水平滚动条：
  4 
  5   
  6 
  7 <body style="overflow-x: hidden"> 
  8 
  9 去掉竖直滚动条：
 10 
 11   
 12 
 13 <body style="overflow-y: hidden">  
 14 
 15 隐藏横向滚动条，显示纵向滚动条
 16 
 17 :  
 18 
 19 <body style="overflow-x:hidden;overflow-y:scroll"> 
 20 
 21 全部隐藏
 22 
 23   
 24 
 25 <body style="overflow:hidden"> 
 26 
 27 或者是
 28 
 29   
 30 
 31 <body scroll="no">  
 32 
 33 如果是框架页，利用上面的方法仍不能去除可考虑以下办法：
 34 
 35  
 36 
 37 被包含页面里加入
 38 
 39  
 40 
 41 <style>  
 42 
 43 html { overflow-x:hidden; } 
 44 
 45 </style>  
 46 
 47 如果想隐藏垂直滚动条
 48 
 49 : 
 50 
 51 <style>  
 52 
 53 html { overflow-y:hidden; } 
 54 
 55 </style>  
 56 
 57 这里先说一下滚动条的属性代码：
 58 
 59   
 60 
 61 overflow-y : visible | auto | hidden | scroll 
 62 
 63  
 64 
 65 visible : 
 66 
 67  
 68 
 69 不剪切内容也不添加滚动条。
 70 
 71  
 72 
 73 auto : 
 74 
 75  
 76 
 77 在需要时剪切内容并添加滚动条
 78 
 79  
 80 
 81   
 82 
 83 hidden 
 84 
 85 : 
 86 
 87  
 88 
 89 不显示超过对象高度的内容，这里不对这个属性作介绍，大家喜欢的话可以自
 90 
 91 己尝试
 92 
 93   
 94 
 95 scroll : 
 96 
 97  
 98 
 99 总是显示纵向滚动条
100 
101   
102 
103 首先我现说一下去掉滚动条的方法：
104 
105   
106 
107 如果用百度风格模版的话
108 
109 ，滚动条只可能有一个，那就是整个空间右边最大的浏览器窗口滚
110 
111 动条，也就是我美化过的那个滚动条，现在告诉大家，我们可以把这个滚动条去掉，但是却
112 
113 不影响浏览的方法：
114 
115  
116 
117 在
118 
119 body 
120 
121   
122 
123 {}
124 
125 中加入
126 
127 overflow-y : 
128 
129   
130 
131 visible
132 
133 就可以了，这样滚动条就不会显示出来了。大家可能会问，这样怎么往下拉？呵呵，
134 
135 既然我说了不影响浏览，那当然是有方法的，浏览的方法就是用
136 
137  
138 
139   
140 
141 鼠标的滚轮，虽然滚动条没了，可是鼠标滚轮还是能够让网页上下滚动的。我相信大家一般
142 
143 浏览网页的时候用滚轮下拉网页的次数应该比直接用鼠标拖动滚动条的次
144 
145  
146 
147   
148 
149 数多吧？提示下，如果碰到没有滚动条而鼠标又没有滚轮的朋友，该怎么浏览网页呢？呵
150 
151 呵，大家可以用键盘上面的方向键上方的
152 
153 PageUp
154 
155 和
156 
157 PageDown 
158 
159   
160 
161 来上下翻页，也可以用空格往下拉网页和
162 
163 Shift+
164 
165 空格往上拉网页，还有一个方法就是用上下 
166 
167 
168 
169 
170 
171 
172 
173 
174 
175 方向键来拉动，另外还有按
176 
177 Home
178 
179 键回到网页顶部，
180 
181 End
182 
183 键到
184 
185  
186 
187   
188 
189 达网页底部，呵呵，是不是方法很多呢？不过这样总会有那么一些些的不方便，所以大家可
190 
191 以根据自己的空间和喜好来考虑要不要取消这个滚动条。
192 
193  
194 
195 哈哈，想不到啰哩叭嗦地，一下说了这么多话
196 
197   
198 
199 下面我们说添加滚动条的方法：
200 
201  
202 
203 overflow-y : auto;height:
204 
205 多少
206 
207 px 
208 
209  
210 
211 auto 
212 
213   
214 
215 就是自动判断要不要加入滚动条，当设定的对象内容超过了
216 
217 height
218 
219 设定的高度时，就自动
220 
221 添加滚动条，不然则不显示，
222 
223 body{}
224 
225 中的默认值就是
226 
227  
228 
229   
230 
231 overflow-y : auto;height:
232 
233 浏览器高度，所以当网页内容超过浏览器高度的时候，浏览器右边
234 
235 就会自动显现出滚动条来
236 
237  
238 
239 大家如
240 
241  
242 
243 果需要设置这个的话
244 
245 ，
246 
247 本人建议设置在最新评论
248 
249 #m_comment{}
250 
251 、
252 
253 文章列表
254 
255 #m_blog{}
256 
257 等内容和高度都不固定的模版中，有的朋友找不到这些模
258 
259  
260 
261 版的
262 
263 ID
264 
265 ，可能只有例如
266 
267 #m_comment div.item{}
268 
269 或者
270 
271 #m_pro a{}
272 
273 等的
274 
275 ID
276 
277 ，那么可以自己加上没有的
278 
279 ID
280 
281 ，这样就可以
282 
283 设置了
284 
285   
286 
287 这里还有另一个添加滚动条的方法：
288 
289  
290 
291 overflow-y :scroll  
292 
293 这个参数的作用上面解释过了，不过如果只加这个参数的话，虽然滚动栏会显示，但是不会
294 
295 显示滚动条，所以必须还要加上一个
296 
297 height:
298 
299 多少
300 
301 px  
302 
303 高度属性，跟上面的那个方法差不多，但是有根本的区别，这个无论对象内容的高度是否超
304 
305 过了
306 
307 height
308 
309 设定的高度，滚动栏永远都会显示在边上的
310 
311   
312 
313 下面我们说一下关于滚动条的美化，
314 
315 这个我朋友给我看了网上的一个说明，
316 
317 我觉得上面的图
318 
319 很不错
320 
321 ，
322 
323 但是很小
324 
325 ，
326 
327 所以我放大了一倍
328 
329 ，
330 
331 看起来就清楚多了
332 
333 ，
334 
335 我们先说一下美化的各个属性：
336 
337   
338 
339 SCROLLBAR-FACE-COLOR: 
340 
341 颜色代码
342 
343 ; 
344 
345  
346 
347 SCROLLBAR-HIGHLIGHT-COLOR:
348 
349 颜色代码
350 
351 ; 
352 
353  
354 
355 SCROLLBAR-SHADOW-COLOR: 
356 
357 颜色代码
358 
359 ; 
360 
361  
362 
363 SCROLLBAR-3DLIGHT-COLOR: 
364 
365 颜色代码
366 
367 ; 
368 
369  
370 
371 SCROLLBAR-ARROW-COLOR: 
372 
373 颜色代码
374 
375 ; 
376 
377  
378 
379 SCROLLBAR-TRACK-COLOR: 
380 
381 颜色代码
382 
383 ; 
384 
385  
386 
387 SCROLLBAR-DARKSHADOW-COLOR: 
388 
389 颜色代码
390 
391 ; 
392 
393   
394 
395 大家是不是看到这么多属性有点点头大了？哈哈，
396 
397 放心，
398 
399 看一下我刚才提及的被我放大了一 
400 
401 倍的图解你们就会感觉好多了：
402 
403  
404 
405 这
406 
407  
408 
409 里的图片上还有一个
410 
411 scrollbar-base-color
412 
413 的属性
414 
415 ，
416 
417 其实这个属性是个上面
418 
419 7
420 
421 个属性的总
422 
423 合，怎么说呢？就是当你设定了这个属性的颜色后，
424 
425  
426 
427 前面的
428 
429 7
430 
431 个属性都可以不用设置了，
432 
433 滚动条会自动帮你设定的，只是这个设定都会基于你设定的
434 
435 scrollbar-base-color
436 
437 的颜色而
438 
439 自动设定
440 
441   
442 
443 这个属性的优点就是不用大家费尽心思的去研究各个地方的颜色
444 
445 ，
446 
447 但是缺点就是不能够融和
448 
449 五颜六色于一体。。
450 
451   
452 
453 注：设定了
454 
455 scrollbar-base-color
456 
457 就不要设定其他七个属性了，设定了其他七个属性就不要 
458 
459 设定
460 
461 scrollbar-base-color
462 
463 ，不然之间可能会有冲突，会有一些效果不起作用的
464 
465  
466 
467 最后，还是考虑到大家可能会喜欢我的美化代码
468 
469 [
470 
471 真臭美
472 
473 ~]
474 
475 ，我把我的美化代码贴出来：
476 
477   
478 
479 SCROLLBAR-FACE-COLOR: #CCFFFF; 
480 
481   
482 
483 
484 
485 
486 
487 
488 
489 
490 
491 SCROLLBAR-HIGHLIGHT-COLOR: white; 
492 
493  
494 
495 SCROLLBAR-SHADOW-COLOR: #813533; 
496 
497  
498 
499 SCROLLBAR-3DLIGHT-COLOR: #813533; 
500 
501  
502 
503 SCROLLBAR-ARROW-COLOR: #813533; 
504 
505  
506 
507 SCROLLBAR-TRACK-COLOR: white; 
508 
509   
510 
511 SCROLLBAR-DARKSHADOW-COLOR: #813533; 
512 
513   
514 
515 以上代码本人是加在
516 
517 body{}
518 
519 中的
520 
521

 

posted @ 2013-05-17 22:56  岁过无痕  阅读(586)  评论(1)  编辑  收藏  举报