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