`

[转]去掉iframe的水平滚动条而保留垂直滚动条

阅读更多

如果untitled3.html页中文字超过一屏的话,就会出现了垂直滚动条,在IE7.FF下都是不出现水平滚动条,但在IE6下会出现.
在网上找了两种方法如下:
在<boby>里加入scroll="no",可隐藏滚动条;
在<boby>里加入style="overflow-x:hidden",可隐藏水平滚动条;加入style="overflow-y:hidden",可隐藏垂直滚动条。
但试了都不行,最后终于找到了正确的方法:
在被包含页面里加入

Java代码 复制代码
  1. <style>   
  2. html { overflow-x:hidden; }   
  3. </style>  
<style>
html { overflow-x:hidden; }
</style>

有一段解释是这样说的:body{ overflow-x:hidden; }在标准 DTD 下是不可以的.

(某些样式需ie5.5+才能支持):

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立体滚动条阴影的颜色

我们通过几个实例来讲解上述的样式属性:
1.让浏览器窗口永远都不出现滚动条
没有水平滚动条

Java代码 复制代码
  1. <body style="overflow-x:hidden">   
<body style="overflow-x:hidden"> 

没有垂直滚动条

Java代码 复制代码
  1. <body style="overflow-y:hidden">   
<body style="overflow-y:hidden"> 

没有滚动条

Java代码 复制代码
  1. <body style="overflow-x:hidden;overflow-y:hidden">或<body    
  2. style="overflow:hidden">   
<body style="overflow-x:hidden;overflow-y:hidden">或<body 
style="overflow:hidden"> 



2.设定多行文本框的滚动条

没有水平滚动条

Java代码 复制代码
  1. <textarea style="overflow-x:hidden"></textarea>   
<textarea style="overflow-x:hidden"></textarea> 



没有垂直滚动条

Java代码 复制代码
  1. <textarea style="overflow-y:hidden"></textarea>   
<textarea style="overflow-y:hidden"></textarea> 



没有滚动条

Java代码 复制代码
  1. <textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>    
  2. 或<textarea style="overflow:hidden"></textarea>   
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea> 
或<textarea style="overflow:hidden"></textarea> 



3.设定窗口滚动条的颜色
设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

4.在样式表文件中定义好一个类,调用样式表。

Java代码 复制代码
  1. <style>    
  2. .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}    
  3. </style>   
<style> 
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;} 
</style> 


这样调用:

Java代码 复制代码
  1. <textarea class="coolscrollbar"></textarea>    
<textarea class="coolscrollbar"></textarea>  

 

分享到:
评论

相关推荐

    html技巧代码

    - `overflow-y:hidden`:隐藏垂直滚动条,保留水平滚动。 - `overflow-x:hidden`:隐藏水平滚动条,保留垂直滚动。 - `scroll="no"`:在`&lt;body&gt;`标签中使用此属性可禁止任何方向的滚动条显示。 2. **表格单元格...

    50条网页制作小技巧集锦.pdf

    例如,`overflow-y:hidden`用于隐藏垂直滚动条,`overflow-x:hidden`用于隐藏水平滚动条,而`&lt;body scroll="no"&gt;`则可以同时去掉两者。 2. **表格交互效果**:通过JavaScript事件处理,可以实现表格单元格(TD)的...

    Html代码编写技巧

    通过设置`&lt;body&gt;`标签中的样式属性,可以控制页面水平或垂直滚动条的显示。 - **去除垂直滚动条**:`&lt;body style="overflow-y:hidden"&gt;` - **去除水平滚动条**:`&lt;body style="overflow-x:hidden"&gt;` - **禁止所有...

    让iframe透明的参数

    在这个例子中,`iframe`的宽度为470像素,高度为308像素,`scrolling="no"`禁止了垂直滚动条的显示,`title`属性提供了`iframe`的描述,这对于无障碍访问和搜索引擎优化(SEO)都是有益的。 需要注意的是,虽然`...

    包含一些常用js源码

    - `scrolling`:设置IFRAME内部页面是否显示滚动条,默认为auto(根据内容自适应)。 - `topmargin` 和 `leftmargin`:设置IFRAME在容器内的位置。 ### 2. 页面过渡效果 可以通过`&lt;meta&gt;`标签添加页面进入和退出...

    《程序天下:JavaScript实例自学手册》光盘源码

    3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤...

    程序天下:JavaScript实例自学手册

    3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤...

    CSS常见11条技巧与经验收集

    在标准模式下,IE浏览器不支持直接在body上设置滚动条颜色。可以通过将样式应用于`html`标签来解决,如示例所示,这样可以改变滚动条的各种部分的颜色。 4. 文本强制在同一行显示: 若要防止文本换行并保持在容器...

    从入门到精通HTML5——PDF——网盘链接

     3.4.5 去掉水平线阴影——noshade 60  3.5 其他文字标记 60  3.5.1 文字标注标记——ruby 60  3.5.2 声明变量标记——var 61  3.5.3 忽视HTML标记  ——plaintext、xmp 62  3.6 小结 63  3.7 习题 63  第4...

    HTML特效代码大全

    - **作用**:隐藏页面的垂直滚动条。 - **示例**:`&lt;body style="overflow-y:hidden"&gt;` #### 打开新窗口 `&lt;a onclick="javascript:window.open"&gt;` - **语法**:`('目标URL','窗口名称','窗口属性')"&gt;链接文字&lt;/a&gt;` ...

    VeryIDE Bee 互动营销**台 v1.5 UTF-8.rar

    优化 IE6 兼容性若干问题(打开窗口空白、页面滚动条、右下角小提示变形等) 优化 为部分现代浏览器增加 CSS3 效果,例如圆角、阴影等 优化 后台操作窗口拖动不流畅的问题,以及窗口随屏幕尺寸自适应的问题 优化 ...

    网际畅游 MyIE 3.0 源代码

    你也可以将某个Frame或IFrame的URL加入窗口过滤器,这个Frame或IFrame以后就不会下载了。 使用*过滤窗口:在过滤广告窗口时可以在URL中使用*来过滤一批相似的地址。但你可不要用*把所有的窗口都过滤掉哦! ...

    北大青鸟初学HTML基础代码

    - **解析**:通过CSS的`overflow-y`属性可以禁止页面的垂直滚动条。 #### 二十二、播放MIDI音乐 - **语法**:IE浏览器:`*.mid" loop="infinite"&gt;`;非IE浏览器:`*.mid" autostart="true" hidden="true" loop=...

Global site tag (gtag.js) - Google Analytics