`
friping
  • 浏览: 133934 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

滚动条的隐藏

    博客分类:
  • html
阅读更多

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

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

没有水平滚动条
<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条
<textarea style="overflow-y: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.在样式表文件中定义好一个类,调用样式表。
<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用:
<textarea class="coolscrollbar"></textarea> 

分享到:
评论

相关推荐

    webbrowser滚动条隐藏

    这个主题“webbrowser滚动条隐藏”主要涉及到CSS样式控制和技术实现,我们将深入探讨如何通过CSS来隐藏滚动条以及相关的一些考虑因素。 首先,滚动条隐藏的最常见方法是利用CSS3的伪元素选择器`::webkit-scrollbar`...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.docx

    ### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中,滚动条的样式和行为对于提升用户体验至关重要。通过CSS(层叠样式表),开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...

    js隐藏滚动条功能

    最后,关于提供的压缩包文件"滚动条隐藏.html",这很可能是包含了一个示例网页,演示了上述概念的应用。如果你想要进一步了解或实践这个功能,打开并查看这个文件将是一个很好的学习机会。 总之,通过CSS和...

    javascript 显示隐藏滚动条

    js javascript 显示隐藏滚动条 隐藏滚动条 显示滚动条,可以动态的改变,这样有利于控制用户操作。而且这个小小的demo里面获得body或者Element对象的方法也是很特别的。或者说是有意思。

    去掉WebBrowser的边框和滚动条

    在.NET Framework 4.0及以上版本,可以使用`WebBrowser.ObjectForScripting`属性设置一个对象,然后通过JavaScript调用该对象的方法,进而调用Win32 API的`SetScrollbars`函数来隐藏滚动条。 ```csharp public ...

    js 特效 html 特效 滚动条的隐藏显示

    js 特效 html 特效 滚动条的隐藏显示 js 特效 html 特效 滚动条的隐藏显示

    易语言高级表格隐藏滚动条

    在“易语言高级表格隐藏滚动条”这个主题中,我们主要探讨的是如何在易语言中对高级表格控件进行操作,以达到隐藏滚动条的效果。这在某些界面设计中是必要的,例如为了保持界面简洁或自定义滚动行为。 首先,我们...

    vue.js-div滚动条隐藏但有滚动效果的实现方法

    在开发前端页面时,经常会有需要隐藏滚动条但保留滚动功能的场景,这样的设计可以让页面看起来更加简洁...通过上述方法,可以有效地在Vue.js项目中实现div滚动条隐藏同时保持内容滚动的功能,从而提升用户界面的体验。

    CListCtrl 自绘 含滚动条

    2. **重绘策略**:当滚动条滚动时,需要只重绘被滚动条隐藏或新显示出来的部分,以提高性能。 3. **条目坐标转换**:滚动条滚动后,列表项的屏幕坐标会发生变化。因此,在自绘时,需要将逻辑坐标转换为屏幕坐标。 ...

    让滚动条消失

    #### 知识点三:实现滚动条隐藏的方法 根据给定的部分内容,我们可以使用CSS样式来控制滚动条的显示与否。下面将详细介绍如何通过修改CSS属性来实现这一功能。 ##### 方法一:隐藏垂直滚动条 ```html ; OVERFLOW-...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    如果希望在某些情况下隐藏滚动条,可以使用`overflow: hidden;`: ```css div { width: 200px; height: 200px; overflow: hidden; } ``` 然而,CSS3引入了新的特性和伪元素,使得我们可以进一步定制滚动条的...

    易语言隐藏显示滚动条例程

    在这个“易语言隐藏显示滚动条例程”中,我们将深入探讨如何使用易语言来控制窗口中的滚动条的可见性。 首先,我们要明白滚动条在用户界面中的作用。滚动条通常用于在内容超过窗口可视区域时提供导航,允许用户上下...

    去浏览器滚动条代码

    解决方法之一是在CSS中添加特定于IE6的条件注释,使用一些JavaScript库(如`expose`)来模拟滚动条隐藏的效果。 - **对于其他浏览器**:现代浏览器如Chrome、Firefox、Safari和Edge等都支持上述CSS代码。但需要注意...

    DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏.pdf

    ...

    隐藏浏览器上的滚动条

    在网页设计中,有时为了追求特定的视觉效果或者页面布局,我们可能需要隐藏浏览器的滚动条。这可以使得页面看起来更简洁或者与某些全屏设计更协调。隐藏浏览器滚动条通常涉及到CSS(层叠样式表)的使用,下面将详细...

    react-reactcustomscrollbarsReact滚动条组件

    3. `autoHideDuration`:滚动条隐藏动画的持续时间(毫秒)。 4. `scrollbarSize`:滚动条的宽度或高度(取决于滚动方向)。 5. `trackStyle`和`thumbStyle`:分别用于设置轨道和滚动条的样式。 6. `renderView`和`...

    C# 用VScrollBar控制webbrowser的滚动条 简单测试

    此外,为了让WebBrowser的滚动条隐藏,我们需要在初始化WebBrowser时禁用其滚动条: ```csharp webBrowser1.ScrollBarsEnabled = false; ``` 最后,为了使VScrollBar看起来更像WebBrowser的滚动条,可以调整...

    页面出现滚动条的时候如何让滚动条不影响页面宽度

    在网页设计中,当页面内容超出了可视区域的宽度时,浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而,滚动条本身会占用一定的空间,这可能会导致页面宽度缩小,从而影响布局的整体美观性。为了不...

Global site tag (gtag.js) - Google Analytics