HTML与CSS:设计滚动条(仅仅适用于IE浏览器)

摘自:http://www.cnblogs.com/xh831213/archive/2008/07/23/1249488.html
scrollbar属性、样式详解
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>

Scrollbar-Face-Color为滚动条表面颜色设定;
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定;
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

举例:

body { 
background-color: #ffffff; 
color: #336699; 
SCROLLBAR-FACE-COLOR: #BED8EB; 
SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
SCROLLBAR-TRACK-COLOR:#BED8EB; 
SCROLLBAR-ARROW-COLOR: #92C0D1 
注意:滚动条设计仅仅适用于IE浏览器

转载于:https://www.cnblogs.com/KeenLeung/archive/2012/05/14/2499636.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262703.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浅析拯救小矮人的 nlogn 算法及其证明

浅析拯救小矮人的 nlogn 算法及其证明 题型简介&#xff1a; 有 $ n $ 个人&#xff0c;第 $ i $ 个人身高 $ a_i $ 手长 $ b_i $ &#xff0c;他们为了从一个高为 $ H $ 的洞中出去&#xff0c;决定搭人梯。如果一个人和他下面的人的身高之和加上他的手长可以达到洞的高度&…

Android Material Design TabLayout属性app:tabMode和app: tabGravity

Android Material Design TabLayout属性app:tabMode和app: tabGravity Android Material Design 中的TabLayout有两个比较有用的属性 app:tabMode、app:tabGravity&#xff0c; &#xff08;1&#xff09;app:tabMode有两个值&#xff1a;fixed和scrollable。 &#xff08;2&am…

IE 中的一些脚本问题

1. input name 不支持这样写:var oInput document.createElement("input");oInput.name "MyName";这样写无用, 应该写:var oInput document.createElement("<input nameMyName >");2. 严格定义的XHTML标准的一些问题.假设层关系为:1>…

UVA 567 - Risk

最短路问题&#xff1a;floyd算法&#xff1a; 注意&#xff1a;输出格式 #include<stdio.h> #define MAXN 200int a, b, n, d[30][30], num; void init() {num 0;while(scanf("%d",&a) 1){for(int i 1; i < 20; i )for(int j 1; j < 20; j )if(…

unity混音

前言在游戏中&#xff0c;通常我们需要控制整个游戏的主音量&#xff08;全局音量&#xff09;&#xff0c;并且单独控制背景音乐和其他音效&#xff08;攻击、爆炸之类&#xff09;的音量&#xff0c;这时我们可以用Audio Mixer来解决。 如果文章中有哪些地方写的不对&#xf…

一个较完整的关键字过滤解决方案(上)

如果您希望看到关键字过滤算法的话那么可能就要失望了。博客园中已经有不少关于此类算法的文章&#xff08;例如这里和这里&#xff09;&#xff0c;虽然可能无法直接满足特定需求&#xff0c;但是已经足够作为参考使用。而本文的目的&#xff0c;是给出一个较为完整的关键字过…

核能力将定手机浏览器HTML5之争成败

目前&#xff0c;国内手机浏览器市场竞争异常激烈&#xff0c;UC、腾讯、欧朋、海豚等各大手机浏览器品牌频频亮出各自的HTML5跑分一比高下。然而各大厂商的HTML5功力到底有多深却众说纷纭&#xff0c;能否迅速适应对HTML5的支持&#xff0c;对厂商来说面临的可能是实力的巨大挑…

【转】Thunderbird中配置签名

原文网址&#xff1a;https://support.mozilla.org/zh-CN/kb/Thunderbird%E4%B8%AD%E9%85%8D%E7%BD%AE%E7%AD%BE%E5%90%8D “签名”是一块自动附加到每个您发出的消息的文字&#xff08;包括新消息和对收到消息的回复&#xff09;。他们通常用来提供与每个消息有关的附加联系信…

base css

body,ul,ol,dt,dd,img,p,h1,h2,h3,h4,h5,h6,input,textarea,select,fieldset,legend,ul,ol,dl,th{margin: 0;padding: 0; } body {font-family: "微软雅黑";color: #333; } input,img{border: 0;outline: none; } img {display: block; } ul,ol,li{list-style: none …

Windows下的常用的DOS命令

用的DOS命令。 1.dir dir是英文单词directory(目录&#xff09;的缩写&#xff0c;主要用来显示一个目录下的文件和子目录。 [功能]显示指定磁盘、目录中的文件和子目录信息&#xff0c;包括文件及子目录所在磁盘的卷标、文件与子目录的名称、每个文件的大小、文件及目录建立的…

依赖注入Bean属性——手动装配Bean

一、构造方法注入 其中&#xff0c;可以根据不同的参数列表调用不同的重载的构造方法&#xff1b; 其中&#xff0c;基本数据类型没有包&#xff0c;引用类型都有包路径&#xff0c;基本类型对应封装类&#xff1b; 二、通过property标签调用类的set方法注入 三、通过p命名空间…

ADO.NET数据库

ASP.NET提供了ADO.NET技术&#xff0c;它是ASP.NET应用程序与数据库进行交互的一种技术。 ADO.NET技术把对数据库的操作分为几个步骤&#xff0c;并为每个步骤提供对象来封装操作过程&#xff0c;从而使对数据库的操作变得简单易行。 ADO.NET组件通过以下两个主要的组件将数据访…

获取滚动文本框TextArea焦点位置信息

//输入参数&#xff1a;// _mOffset 滚动文本框对象//返回值:// OffsetObject 位置信息对象// length 焦点位置长度// leftValue 滚动文本框从开始到焦点所在位置的文本值// rightValue 滚动文本框从焦点位置到结束的文本值// scrollTop 滚动框位置//更新记录:// 2…

十天学会ASP.Net——(2)

2.Web控件 1&#xff09;WebControl基类属性 参考http://msdn.microsoft.com/zh-cn/library/7zt8s89c 2&#xff09;Form控件&#xff08;很简单&#xff09; 应用&#xff1a;实现如下效果 <form id"form1" runat"server"> <div> 班级:<br…

Spring表达式

一、SpEL 其中&#xff0c;直接写也可以赋值&#xff0c;‘ ’ 单引号引起来后成为一个字符串对象&#xff0c;可以调用String的方法&#xff1b; 二、引用另外一个bean 装配这个类的bean&#xff1a; 1、第一种方法&#xff0c;property标签中使用bean引用 2、使用Spring表达…

sama5d3 环境检测 gpio--yk测试

说明:  &#xff47;&#xff50;&#xff49;&#xff4f;的&#xff2d;&#xff21;&#xff30;关系 yk0--pioA7 yk1--pioA5 yk2--pioA9 yk3--pioA3 yk4--pioA1 yk5--pioA8 (端子从左&#xff0d;&#xff0d;&#xff1e;右 QD--pioA21内部总启动信号&#…

【Vegas原创】X connection to localhost:11.0 broken (explicit kill or server shutdown)解决方法...

以oracle 进入系统&#xff08;不要使用su切换到oracle&#xff09; 执行env 显示 DISPLAYlocalhost:10.0 执行dbca &#xff0c;出现图形界面 转载于:https://www.cnblogs.com/amadeuslee/archive/2009/01/04/3744408.html

关于偏微分

在图像处理里面&#xff0c;偏微分主要体现在能量极小化上面&#xff0c;而这种极小化泛函往往包含变量的微分&#xff0c;所以只要掌握Euler-Lagrange方程就可以知道其演化方程了&#xff0c;而这个方程就是极小化能量泛函的解。辅以梯度下降法之类的迭代策略&#xff0c;和离…

集合属性注入值

一、集合注入&#xff0c;装配bean的时候&#xff0c;即在xml中添加bean的时候 1、List集合 2、set集合&#xff0c;无序&#xff0c;即无索引&#xff0c;所以也无重复&#xff0c; 3、map key-value键值对双列集合&#xff0c;内置接口Entry 4、Properties集合&#xff0c;可…

用C/C++实现倒序输出,以12345为例

用C/C语言实现倒序输出12345,代码如下#include <stdio.h>int main(){ int i12345; int b; for(;i>1;ii/10) { bi%10; printf("%d",b); } return 0;}转载于:https://blog.51cto.com/cheng618/1701515