给页面添加滚动条

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>






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值