现在的位置: 首页 > 综合 > 正文

给页面添加滚动条

2017年12月26日 ⁄ 综合 ⁄ 共 1502字 ⁄ 字号 评论关闭

1.overflow内容溢出时的设置

       overflow 水平及垂直方向内容溢出时的设置

       overflow-x 水平方向内容溢出时的设置

       overflow-y 垂直方向内容溢出时的设置

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

       visible- 默认值,使用该值时,无论设置的 width 和 height 的值是多少,其中的内容是否超出范围都将被强制显示。

       hidden-与visible是相反的效果,任何超出 width 和 height 的内容都会不可见

       scroll-无论内容是否超出范围,都将显示滚动条。

       auto-当内容超出范围时,显示滚动条,否则不显示

应用

       没有水平滚动条

       <div style="overflow-x:hidden">test</div>

       没有垂直滚动条

       <div style="overflow-y:hidden">test</div>

       没有滚动条

       <div style="overflow-hidden;overflow-y:hidden;">test</div>

       或者

       <div style="overflow:hidden">test</div>

       自动显示滚动 条

       <div style="height:100px;width:100px;overflow:auto;">test</div>


2.自定义滚动条的颜色

       body{

                scrollbar-arrow-color:#f4ae21;/*三角箭头的颜色*/

                scrollbar-face-color:#333;/*立体滚动条的颜色*/

                scrollbar-3dlight-color:#666;/*立体滚动条亮变的颜色*/

                scrollbar-highlight-color:#666;/*滚动条空白部分的颜色*/

                scrollbar-shadow-color:#999;/*立体滚动条阴影的颜色*/

                scrollbar-darkshadow-color:#666;/*立体滚动条强阴影的颜色*/

                scrollbar-track-color:#666;/立体滚动条北京颜色*/

                scrollbar-base-color:#f8f8f8;/*滚动条的基本颜色*/

                Cursor:url(mouse.cur);/*自定义个性鼠标*/

       }

     以上2项适用与<body>、<div>、<textarea>、<iframe>
     <html>
     <head>
     <meta http-equiv="Content-Language" content="zh-cn">
     <meta http-equiv="Content-Type" content="text/html;
     charset=gb2312">
    <title>用CSS控制滚动条样式</title>
     <STYLE>
     BODY {
     }
     </STYLE>
     </head>
     <body>
     <p>&nbsp;</p>
     </body>
     </html>


抱歉!评论已关闭.