iFrame只要竖滚动条，不要横滚动条的方法

来源：互联网发布：阿里云邮箱管理员登录编辑：程序博客网时间：2024/05/17 06:30

iFrame只要竖滚动条，不要横滚动条的方法
<iframe src="welcome.html"

name="test"

marginwidth="0"

marginheight="0"

allowtransparency="true"

id="test"

scrolling="auto"

height="200px"

width="200px">

</iframe>

我们可以通过js来该iframe的宽和高，当然包括src里面包含的页面或者do请求

document.getElementById("test").style.height = ???

document.getElementById("test").style.width= ???

document.getElementById("test").src= ???

如果想把iframe里面包含的页面需要传递的值传递到父页面，可以

parent.document.getElementById("??").value = document.get.......

[parent代表父页面，父页面的某个值 = iframe包含的页面的某个值]

让iframe出现竖滚动条，而不出现横滚动条

方法一：

设置body宽度的做法，在iFrame包含的页面内中写入，如下
body {
width: 95%;
margin: 0px;
padding: 0px;
}

通过css来控制宽度，我没有设100%，默认是100%；而是设了95%；这样因为整体页面的宽度小于100%，所以就不再出现横滚动条了，而竖滚动条依然起作用

方法二：

在iFrame的包含页面里加入
<style>
html { overflow-x:hidden; }
</style>

两种方法都可以搞定

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ychatou1220/archive/2010/05/11/5579582.aspx

iframe滚动条颜色

1．overflow内容溢出时的设置
overflow-x水平方向内容溢出时的设置
overflow-y垂直方向内容溢出时的设置
以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。
2．scrollbar-3d-light-color立体滚动条亮边的颜色
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
以上七个属性设置的值都是颜色值，可以使用样式表定义的各种表达方式。
使用以上的样式定义内容，我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式，第一组样式属性用于设定被设定对象是否显示滚动条，第二组样式属性则用于设置滚动条的颜色，要注意的本文涉及的样式属性都是ie才能支持的，第二组的样式属性只有ie5.5版本才能支持，所以请大家在调试的时候注意。
我们通过几个实例来讲解上述的样式属性：
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条

没有垂直滚动条

没有滚动条
或
2.设定多行文本框的滚动条
没有水平滚动条
gfffghfg
没有垂直滚动条
nbngdgg dsgsdgdgdgdgdgsdgdgdfg
没有滚动条
sdfgdffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
或
3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色
scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果：

4.设定其他元素时，基本上一样，你最好是在样式表文件中定义好一个类，这样你就可以重复使用了。
.coolscrollbar
{
scrollbar-arrow-color:yellow;
scrollbar-base-color:lightsalmon;
}
将以上语句加入到样式表文件中或html头部的当中，然后使用
假如Iframe引用的文件是test.htm,把下列的样式放到test.htm文件的<head>与</head>之间

<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: rgb(10,236,209); //滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: rgb(23,255,155);//滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: rgb(255,116,23);//立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: rgb(66,93,127);//滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: rgb(93,232,255);//上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: rgb(255,70,130);//滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: rgb(10,0,209);//滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: rgb(66,93,128)；//滚动条的基本颜色
}
</STYLE>

iFrame只要竖滚动条，不要横滚动条
如题，就是在网页中，只显示右侧的垂直滚动条，而不要底部的水平滚动条；这个问题让我挠头了半天。

做的那个管理界面，为了能让菜单在整个窗口中显示，我没有用Frame，而是用了iFrame；为了让iFrame窗口适用大小，我也用JavaScript代码做了判断；

插入iFrame的代码如下(我没有设宽高，宽高有Js代码控制的，这里不再描述)
<iframe src="welcome.html" name="workArea" align="middle" marginwidth="0" marginheight="0" allowtransparency="true" application="true" id="workArea" scrolling="auto"></iframe>

滚动条设了自动auto，当页面内容多时，会自动出现滚动条；

预想效果是出现了，但是不仅出了右侧的竖滚动条，下面左右滚动的横滚动也出现了，调整内容宽度，也一样；郁闷；虽然不影响大碍，但是觉得太不爽了。

看网上有人说，设置body的css样式；
<style type="text/css">
body {
overflow-x : hidden ;
}
</style>

试过之后，发现不行，有的说是IE不支持，我看可能是我的页网是xhtml的问题吧，如果去掉了头部的DTD；就是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

不过我不想这样；因为我所有的网页都是基于W3C标准的，我并不希望因为这个小功能而去改动代码规范；

又试了其它几个办法，也是不行；不管怎么设置，内容一多，就出现横滚动条；

通过测试，得到方法一：

想到设置body宽度的做法，在iFrame包含的页面内中写入，如下
body {
width: 95%;
margin: 0px;
padding: 0px;
}

通过css来控制宽度，我没有设100%，默认是100%；而是设了95%；这样因为整体页面的宽度小于100%，所以就不再出现横滚动条了，而竖滚动条依然起作用；

后又经人介绍，得到方法二：

在iFrame的包含页面里加入
<style>
html { overflow-x:hidden; }
</style>

两种方法都可以搞定；

这些小问题，很烦人，要说也没有什么技术含量，所以很多程序员不愿意去做，没办法，要想做得好，做得细致，光有高深技术是不行的，大多时间都是消耗在这些小问题上；

效果：http://www.jxd168.cn/manage/ManagePanel.html

实现了Ajax，可以异步获取数据了。

iframe中不显示滚动条

滚动字幕Marquee代码大全

基本语法
-------------------------------------------
<marquee>滚动文字 </marquee>

文字移动属性的设置

方向

<direction=#> #=left, right,up,down <marquee direction=left>从右向左移！</marquee>

方式

<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走！</marquee>
<marquee behavior=slide>只走一次就歇了！</marquee>
<marquee behavior=alternate>来回走</marquee>

循环

<loop=#> #=次数；若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟！</marquee>

速度

<scrollamount=#> <marquee scrollamount=20>啦啦啦，我走得好快哟！</marquee>

延时

<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦，我走一步，停一停！</marquee>

外观(Layout)设置

对齐方式(Align)

<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦，我会移动耶！</marquee>
</font>

底色

<bgcolor=#> #=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色！</marquee>

面积

<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积！</marquee> 　

空白

(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积！</marquee>

鼠标响应：即鼠标指向就停，离开继续.

onmouseover="this.stop()" onmouseout="this.start()">

例如：<marquee direction=up scrollamount=2 onmouseover="this.stop();" onmouseout="this.start();" width=100 height=100>中华人民共和国中华人民共和国<br>www.cnzz.cc中国站长网欢迎您<br>我学会了，哈哈哈</marquee>