1)
body, div
{
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF; /*滚动条及箭头的亮边色*/
SCROLLBAR-SHADOW-COLOR: #E1E1E1; /*滚动条及箭头的暗边色*/
SCROLLBAR-3DLIGHT-COLOR: #E1E1E1; /*滚动条及箭头的3D亮边色*/
SCROLLBAR-TRACK-COLOR: #E1EDFD; /*滚动条底色*/
SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF; /*滚动条及箭头的暗边阴影色*/
SCROLLBAR-BASE-COLOR: #9BBBF4; /*滚动条的基本颜色*/
SCROLLBAR-ARROW-COLOR: #35507A; /*箭头的颜色*/
SCROLLBAR-FACE-COLOR: #9BBBF4; /*滚动条及箭头的颜色*/
}
2)
（某些样式需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>
3)
在你的<head>..</head>部分加如下语句即可：
<style>
BODY {
FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; SCROLLBAR-FACE-COLOR: #E8E8E8; SCROLLBAR-HIGHLIGHT-COLOR: #D96405; SCROLLBAR-SHADOW-COLOR: #D96405; SCROLLBAR-3DLIGHT-COLOR: #eeeeee; SCROLLBAR-ARROW-COLOR: #D96405; SCROLLBAR-TRACK-COLOR: #eeeeee; SCROLLBAR-DARKSHADOW-COLOR: #eeeeee
}
</style>
from：http://blog.csdn.net/zhangjian01361/archive/2006/05/23/751386.aspx
分享到：
相关推荐
JavaScript 自定义浏览器滚动条兼容 IE、火狐和 chrome 本文主要共享了使用原生 JavaScript 实现自定义浏览器滚动条兼容 IE、火狐和 chrome 的思路与方法。通过 JavaScript 实现自定义浏览器滚动条，可以实现跨...
2. **选择元素**：选择需要添加自定义滚动条的DOM元素，可以是整个body，也可以是特定的div或其他容器。 3. **初始化插件**：通过JavaScript调用mCustomScrollbar函数，传入相应的配置参数，例如： ```javascript ...
**jQuery自定义滚动条插件**是一种用于增强网页滚动体验的工具，尤其在现代Web设计中，为了提供更美观和个性化的界面，自定义滚动条变得越来越重要。本插件适用于IE8及以上的浏览器，允许开发者对滚动条的外观和行为...
现在网上流行好多可以自定义图片横向滚动条的效果，可惜大部分都是jQuery实现的，且兼容性不好。 今天特意整理了一款js实现的图片横向自定义滚动条效果，兼容目前主要浏览器（IE6已被忽略）。 喜欢的童鞋...
JavaScript 自定义滚动条是一种常见的网页美化技术，它允许开发者通过 CSS3 和 JavaScript 为网页的滚动条赋予独特的样式和交互效果，以提升用户体验并增强页面的整体设计感。在这个主题下，我们将深入探讨如何使用...
jQuery.mCustomScrollbar是一款强大的自定义滚动条插件，它能够帮助开发者轻松地对滚动条进行美化和定制，从而提升网站的整体视觉效果和用户交互性。 ### 插件概述 jQuery.mCustomScrollbar是由Marco Castelluccio...
本文将深入探讨“jquery-layout”库以及如何结合自定义滚动条来优化用户体验。 “jquery-layout”是一个强大的JavaScript插件，它允许开发者在网页上创建多区域、响应式的布局。该插件基于jQuery，提供了灵活的配置...
在网页设计中，滚动条是不可或缺的一部分，尤其是在内容丰富的页面上。...通过合理的样式设置和适时的JavaScript辅助，我们可以创建出既美观又实用的自定义滚动条，使用户在浏览网页时享受更加流畅的体验。
自定义滚动条可以提升用户体验，使其更加符合网站的整体风格和品牌形象。本文将深入探讨如何使用Jquery来实现自定义滚动条。 首先，Jquery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画效果。在实现...
本篇文章将深入探讨如何使用JavaScript实现自定义滚动条，并确保其在Internet Explorer（IE）、Firefox和Chrome等主流浏览器中的兼容性。 首先，我们需要理解不同浏览器对滚动条的支持情况。在CSS中，Webkit内核的...
滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条） 支持键盘...
为了提供更好的用户体验，有时我们需要对滚动条进行自定义，使其更符合网站的整体风格。本篇文章将详细探讨如何实现一个兼容IE浏览器的自定义滚动条，并包含滚动时的各种回调函数。 首先，我们关注的是HTML和CSS在...
标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条，它可以提升网站的用户体验和视觉吸引力。 滚动条通常在内容超过容器显示范围时出现，允许用户浏览隐藏的部分。在默认情况下，浏览器会...
为了实现自定义的滚动条，我们需要使用CSS3的伪元素`::webkit-scrollbar`和`::webkit-scrollbar-thumb`来修改滚动条的外观。例如： ```css /* 隐藏默认滚动条 */ body::-webkit-scrollbar { width: 0; } /* ...
虽然默认的滚动条样式在各个浏览器中基本一致，但通过CSS（层叠样式表）我们可以自定义滚动条的外观，使其与网站的整体设计更加协调。下面将详细介绍如何使用CSS来控制HTML中的滚动条样式。 1. **滚动条的基本样式*...
1. **启用自定义滚动条**：在CSS中，我们可以通过`::-webkit-scrollbar`选择器来启用自定义滚动条。这个伪元素表示整个滚动条，而`::-webkit-scrollbar-thumb`则用于选择滚动条上的滑块部分。 ```css body { -...
在本文中，我们将探讨如何使用原生JavaScript来实现自定义浏览器滚动条，使其兼容IE、火狐和Chrome等主流浏览器。通常，CSS可以用来改变Chrome浏览器的滚动条样式，但对IE和火狐的支持有限。因此，为了实现跨浏览器...
在ASP.NET开发中，我们经常会遇到需要自定义滚动条样式以提升用户界面体验的情况。本资源提供了一种方法，通过CSS样式和JavaScript实现ASP.NET页面中的垂直滚动条美化。下面将详细阐述这个主题。 首先，CSS（层叠...