zoukankan      html  css  js  c++  java
  • CSS 控制滚动条样式

    在360浏览器中设置滚动条隐藏样式  以下 可直接实现隐藏功能

    1 ::-webkit-scrollbar {/*隐藏滚轮*/
    2   display: none;
    3 }

    如果要兼容 PC 其他浏览器(Firefox 、IE6、IE8、Google等)设置滚动条隐藏样式,在容器(div)外面再嵌套一层 overflow:hidden 内部边框宽高限制尺寸和外部嵌套在一起,就可以隐藏了(内部把外部的滚动条给覆盖了)!

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 *{
     8     margin: 0px;
     9     padding: 0px;
    10 }
    11 /*
    12 内层div一定要和外层div的高设置一致,如果外大里小 底部将会出现空白区域
      如果有滚动,高度一定要小于当前页面高度
    13 */ 14 /* 外层div*/ 15 .nav_div{ 16 width:1366px; /*设置页面内容原本宽度*/ 17 height: 631px; /*设置页面高度*/ 18 overflow-x: hidden; /*隐藏x横向的滚动轮*/ 19 overflow-y: hidden; /*隐藏y纵向的滚动轮*/ 20 } 21 /*内层内容div*/ 22 .nav_indiv{ 23 width:1386px; /*设置页面覆盖滚动轮宽度*/ 24 height: 631px; /*设置页面高度*/ 25 overflow-y:scroll;" /*总是显示纵向滚动条 */ 26 } 27 #nav_background{ 28 width: 1366px; 29 height: 2140px; 30 background: url( images/neiye/neiye2.jpg) no-repeat; 31 background-size:100%; /*图片设置为自适应100%,也可用contain*/ 32 } 33 #nav_zuo{ 34 width: 67px; 35 height: 171px; 36 font-size: 37px; 37 color: #beab86; 38 font-weight: bold; 39 position: relative; 40 top: 350px; 41 margin-left: 300px; 42 } 43 #name_next{ 44 width: 67px; 45 height: 171px; 46 font-size: 37px; 47 color: #beab86; 48 font-weight: bold; 49 margin-top: 958px; 50 margin-left: 300px; 51 } 52 </style> 53 </head> 54 55 <body> 56 <div class="nav_div"> <!--加一个最大的div--> 57 <div class="nav_indiv"> <!--加一个内层的内容div--> 58 <div id="nav_background"> 59 <div id="zuoname"> 60 <div id="nav_zuo">测试名字测试名字测试名字测试</div> 61 <div id="name_next">宴会形式测试名字测试名字测试(冷餐会)</div> 62 <div class="go"></div> 63 </div> 64 </div> 65 </div> 66 </div> 67 </body> 68 </html>

    overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 


    overflow: auto; 在需要时内容会自动添加滚动条 
    overflow: scroll; 总是显示滚动条 
    overflow-x: hidden; 禁止横向的滚动条 
    overflow-y: scroll; 总是显示纵向滚动条 

    <body style='overflow:scroll;overflow-x:hidden'>    /*去掉横向滚动条*/
    <body style='overflow:scroll;overflow-y:hidden'>    /* 去掉竖向滚动条*/
    <body scroll="no">    /*两个都去掉*/ 

    以上三个属性设置的值为visible、scroll、hidden、auto 

    visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。 
    hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。 
    scroll 无论内容是否超越范围,都将显示滚动条。 
    auto 当内容超出范围时,显示滚动条,否则不显示。

    滚动条overflow属性的应用 

    1  
    2 /*没有水平滚动条*/ 
    3 <div style="overflow-x:hidden">name</div> 
    4 /*没有垂直滚动条*/ 
    5 <div style="overflow-y:hidden">name</div> 
    6 /*没有滚动条*/ 
    7 <div style="overflow-x:hidden;overflow-y:hidden" 或 style="overflow:hidden">name</div> 
    8 /*自动显示滚动条*/
    9 <div style="height:100px;100px;overflow:auto;">name</div>

    自定义滚动条的样式实例

     1 Body {}{ 
     2 scrollbar-arrow-color: #f4ae21; /*三角箭头的颜色*/ 
     3 scrollbar-face-color: #333; /*立体滚动条的颜色*/ 
     4 scrollbar-3dlight-color: #666; /*立体滚动条亮边的颜 
     5 */ 
     6 scrollbar-highlight-color: #666; /*滚动条空白部分的 
     7 颜色*/ 
     8 scrollbar-shadow-color: #999; /*立体滚动条阴影的颜 
     9 */ 
    10 scrollbar-darkshadow-color: #666; /*立体滚动条强阴 
    11 影的颜色*/ 
    12 scrollbar-track-color: #666; /*立体滚动条背景颜色*/ 
    13 scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/ 
    14 Cursor:url(mouse.cur); /*自定义个性鼠标*/ 
    15 }
  • 相关阅读:
    结对项目进度1
    学期总结之数学建模软件——LINGO和R
    四则运算计算程序(完成)
    学期总结之数学建模软件——编译原理
    图形学算法之NichollLeeNicholl算法
    学期总结之3D游戏开发
    《构建之法》读后感
    四则运算计算程序(初步)
    结对项目进度2
    Spring IOC原理解析
  • 原文地址:https://www.cnblogs.com/1301694f/p/8563956.html
Copyright © 2011-2022 走看看