Menu

超出部分自动添加滚动条,css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

我们会看到很多网站都会有一种效果,如果内容没超过div高度就是直接显示了,如果比较长就会有一个滚动条效果了,下面我来给大家介绍这种实现方法

 

js实现方法

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的

 代码如下

 1 div { 
 2 scrollbar-face-color: #fcfcfc; 
 3 scrollbar-highlight-color: #6c6c90; 
 4 scrollbar-shadow-color: #fcfcfc; 
 5 scrollbar-3dlight-color: #fcfcfc; 
 6 scrollbar-arrow-color: #240024; 
 7 scrollbar-track-color: #fcfcfc; 
 8 scrollbar-darkshadow-color: #48486c; 
 9 scrollbar-base-color: #fcfcfc 
10 } 

复制代码

 

function setheight()
美高梅开户,    {
    var div=document.getElementById(“event_basicInfo”);
    //div.style.width=”40%”;
    div.style.height=400;
    div.style.overflow=”auto”;
    }
window.onload=setheight;

滚动条样式主要涉及到如下CSS属性: overflow属性:
检索或设置当对象的内容超过其指定高度及宽度时如何显示内容 overflow: auto;
在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条 overflow-y: scroll;
总是显示纵向滚动条 width: 568px; width: 98%;
设置区域的宽度[像素/百分比等等] height: 120px;
设置区域的高度[像素/百分比等等]

css实现方法

 1 <STYLE> 
 2 BODY { 
 3 SCROLLBAR-FACE-COLOR: #f892cc; 
 4 SCROLLBAR-HIGHLIGHT-COLOR: #f256c6; 
 5 SCROLLBAR-SHADOW-COLOR: #fd76c2; 
 6 SCROLLBAR-3DLIGHT-COLOR: #fd76c2; 
 7 SCROLLBAR-ARROW-COLOR: #fd76c2; 
 8 SCROLLBAR-TRACK-COLOR: #fd76c2; 
 9 SCROLLBAR-DARKSHADOW-COLOR: #f629b9; 
10 SCROLLBAR-BASE-COLOR: #e9cfe0 
11 } 
12 </STYLE> 

Overflow内容溢出时的设置

SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色

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

网页中去掉滚动条:

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

去掉横向滚动条:<body style=’overflow:scroll;overflow-x:hidden’>

自动显示滚动条

去掉竖向滚动条:<body style=’overflow:scroll;overflow-y:hidden’>

 代码如下

两个都去掉:<body scroll=”no”>

复制代码

框加中去滚动条在name=””后面加 scrolling=”No”

<div

1,Overflow内容溢出时的设置 overflow

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

水平及垂直方向内容溢出时的设置 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-x:hidden;overflow-y:hidden”
或style=”overflow:hidden”>test</div>

自动显示滚动条
<divstyle=”height:100px;width:100px;overflow:auto;”>test</div>

2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,

我们可以看到滚动条有几种言责组合的,我给他们标了7个号,
分别注释在下面的css代码的后面了,

注意css的注释代码是放在两个斜杠内的两个星号之间,如:

1 Body { 
2 scrollbar-arrow-color: #f4ae21; 
3 scrollbar-face-color: #333; 
4 scrollbar-3dlight-color: #666; 
5 scrollbar-highlight-color: #666; 
6 scrollbar-shadow-color: #999; 
7 scrollbar-darkshadow-color: #666; 
8 scrollbar-track-color: #666; 
9 } 

 

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图