• 有关页面滚动条的总结


      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   
    庆幸的是我,一直没回头。
  • 相关阅读:
    JS复制内容到剪切板
    mysql root密码的重设方法(转)
    php生成excel文件示例代码(转)
    php读取文件内容的三种方式(转)
    使用火蜘蛛采集器Firespider采集天猫商品数据并上传到微店
    Mac Android8.0源码编译笔记
    开源 高性能 高可用 可扩展
    开源 模式
    开源 算法 数据结构
    mdb
  • 原文地址:https://www.cnblogs.com/rocblog/p/3084694.html
Copyright © 2020-2023  润新知