css中的div 滚动条(IE下)

最新推荐文章于 2019-06-18 16:23:15 发布
最新推荐文章于 2019-06-18 16:23:15 发布
阅读量5.5k 收藏 1
点赞数
分类专栏： css 文章标签： div css scroll c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/salonzhou/article/details/6273870
版权
本文介绍如何使用CSS自定义HTML中Div元素的滚动条样式，包括不同状态下的显示方式及颜色配置，适用于IE浏览器。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

以下只在IE下有效：

以前一直认为只有textarea才有滚动条，昨天做一个模板时才发现，div也有滚动条，记录一下。

当div所定义的区域的内容达到一定程度时，在div标签里面嵌入css样式表，定义overflow的属性值，设置滚动条相关的属性。

<style tyle="text/css">
.testDiv{
border-style: solid ;
border-width: 50px ;
border-color: pink ;

position: absolute ;
top:200px ;
left:300px ;
height:200px ;
width:300px ;

//指定水平方面有滚动条，垂直状态没有 如果值为：auto，则当内容超过显示范围时才出现
overFlow-x: scroll ;
overFlow-y: hidden ;

//设置滚动条样式
scrollBar-face-color: green;
scrollBar-hightLight-color: red;
scrollBar-3dLight-color: orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;


}

</style>

注：

1. overFlow:

visible 却省值，没有滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll 总是显示滚动条
hidden 没有滚动条，超出区域的内容不可见
auto 根据内容自动判断是否添加滚动条

 

2.滚动条颜色属性：

　　face-color：滑块颜色
　　hightlight-color：高亮颜色
　　3dlight-color：三维光线颜色
　　darkshadow-color：暗影颜色
　　shadow-color：阴影颜色
　　arrow-color：箭头颜色
　　track-color：滑道颜色
base-color：滚动条的主要颜色，其中包含滚动按钮和滚动滑块

 

3.overFlow-x       overFlow-y

visible 却省值，没有滚动条，根据内容自动扩撑区域的大小，即定义的区域无效
scroll 总是显示滚动条
hidden 没有滚动条，超出区域的内容不可见
auto 根据内容自动判断是否添加滚动条

 

4.如果指定一个层的内容不管有多少，只在指定大小范围内显示能看到的那一部分，多余部分不管，可以如下设置：

overflow-x:hidden,overflow-y:hidden

 

 

<div style="WIDTH: 120; HEIGHT: 140; BACKGROUND-COLOR: #0000C6; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
文字内容
</div>

<div style="WIDTH: 120; HEIGHT: 140;OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
文字内容
</div>
<div style="WIDTH: 120; HEIGHT: 140; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-

以下只有谷歌浏览器下有效：

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

圆角滚动条;

IE滚动条 CSS样式
06-30
网页制作用的一个设置IE滚动条 CSS样式的小工具
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
10-25
本文将介绍如何使用JQuery实现div滚动条的自动定位。 首先，我们需要了解JQuery的基础知识。JQuery是一个快速、简洁的JavaScript库，它通过简化HTML文档遍历和事件处理、动画和Ajax交互，使得Web开发变得更加方便和...
CSS设置滚动条样式
燕儿归的专栏
12-28 1195
因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示：   下面就讲解这几个属性怎么使用，代表什么意思。 一：webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条
兼容IE的滚动条css
积累与备忘
01-08 592
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Author&
ie浏览器div随滚动条滚动
weixin_30296405的博客
06-24 162
第一种方法: html,body{height:100%;width:100%;overflow:hidden}#content{height:100%;overflow:auto;overflow-x:hidden;width:100%}//#content可换成body<divid="content"><br/><br/><br...
如何让div出现滚动条
dengguangming2014的博客
07-12 168
由于DIV本身属性并没有滚动条设置，但是有些地方的设计却需要出现滚动条，如何实现呢？本人采用CSS样式来控制显示！而且也很简单，代码如下： <div style="OVERFLOW-Y: auto; PADDING:0px 10px 0px 10px;SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; SCROLLBAR-HIGHL...
div css 滚动条样式 DIV滚动条属性及样式设置方式
12-13
CSS提供了多种属性来改变滚动条的外观，但这些属性并非所有浏览器都支持，尤其是老版本的IE。以下是一些常见的滚动条样式属性： 1. `scrollBar-face-color`：滚动条滑块的颜色。 2. `scrollBar-highlight-color`：...
div模拟滚动条当div宽度小于18时滚动条不滚动
12-03
总的来说，解决IE浏览器中宽度小于18像素的`div`滚动条不滚动的问题，可以通过调整`div`宽度、使用CSS hack或引入第三方库来实现。在进行网页开发时，确保对各种浏览器的兼容性测试是非常重要的，特别是对老版本的IE...
FireFox火狐浏览器与IE兼容问题 – 透明滤镜 DIV滚动条
12-11
问题一：最简单的鼠标移过手变型的css要改了 cursor:pointer;/*FireFox（火狐）不支持cursor:hand*/ dw8下面自动出来的也没有hand这个属性了，标准的是pointer 问题二：FireFox（火狐）不支持滤镜 最常见的半透明不...
html 滚动条在IE6和IE7中兼容性问题
01-21
解决方法：在css中增加对包含滚动条的页面元素的显示大小限制。 例子： 复制代码代码如下:<div> ”scrollBarDiv”> …………………………….. </table> </div> 以下css在IE6中滚动天不显示，但在ie7中正常显示 div...
IE浏览器，div模拟滚动条，div宽度小于18 滚动条不滚动
HelloWorldDemo
11-06 1621
IE浏览器，div模拟滚动条，div宽度小于18 滚动条不滚动 环境 win7 IE 10 代码： scroll IE10浏览器运行在 IE7,8,9,10模式下，测试用div模拟滚动条时，如果div宽度小于18px时，单击滚动条有问题，滚动条不能正常滚动。
宽度设置width:100%，出现水平滚动条
IT飞牛
03-23 541
例如： <div class="d1" style="width:500px; height:300px; overflow-y:auto;"> <div class="d2" style="width:100%"> //代码块 </div> </div> 要达到的效果是，如果d2的高度大于300px时，自动出现垂直滚动条，在ie7+都正常；...
CSS设置滚动条样式（兼容IE）
热门推荐
Rey
05-18 8万+
废话不多说，直接上demo，最下面有详细注释。 1、这是在webkit浏览器下显示的样式。 （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： Lorem ipsum dolor sit amet, consectet
CSS自定义滚动条样式，兼容IE浏览器
七侠剑客的博客
06-18 9736
经常写页面的同学都知道，浏览器一般自带的滚动条样式很丑，和页面风格格格不入，于是就想着是否能够改变原有滚动条样式？但实际中，其他浏览器又和IE浏览器不一样，导致兼容性不好。 chrome浏览器滚动条自定义样式修改： div{ /*滚动条滑块按钮的颜色*/ scrollbar-face-color: #134187; /*滚动条整体颜色*/ scrollbar-highlight-c...
滚动条
chuiqicn的专栏
11-16 399
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/
IE11浏览器滚动条CSS样式
ywCSD的博客
09-14 6160
下面是我不断测试的结果，若有错误或不全，请在评论里面给出，我会立马更正；若有更好的方案，你可以留言，让大家都开开眼界。。。。。。 /* 滑动条的颜色 */ scrollbar-face-color:#606060; scrollbar-base-color:#cdcdcd; /* 滑动条边框的颜色 */ scrollbar-shadow-color:#fff; /* IE11下没
css修改div滚动条样式
最新发布
02-10
### 如何使用 CSS 自定义或修改 `div` 元素的滚动条样式 为了自定义或修改 `div` 元素中的滚动条样式，可以通过特定的选择器来实现这一目标。这些选择器允许针对不同浏览器环境下的滚动条组件应用不同的样式。 #### WebKit 浏览器（Chrome 和 Safari） 对于基于 WebKit 的浏览器，可以利用 `-webkit-scrollbar` 及其相关伪类来自定义滚动条： ```css /* 定义整个滚动条 */ .custom-div::-webkit-scrollbar { width: 10px; } /* 滚动轨道 */ .custom-div::-webkit-scrollbar-track { background-color: #f1f1f1; } /* 滚动滑块 */ .custom-div::-webkit-scrollbar-thumb { background-color: darkgrey; border-radius: 10px; } ``` 上述代码片段展示了如何调整滚动条的整体宽度以及轨道和滑块的颜色与圆角半径[^1]。 #### Firefox 浏览器 Firefox 使用标准的 `scrollbar-width` 属性和 `scrollbar-color` 来简化定制过程： ```css .custom-div { scrollbar-width: thin; /* 或 auto / none */ scrollbar-color: darkgrey lightgray; } ``` 这里设置了滚动条的粗细程度，并指定了滚动条颜色方案，其中第一个值代表滑块颜色而第二个则是背景色。 #### Internet Explorer 和 Edge (旧版本) IE 和早期版本的 Edge 支持通过 `scrollbar-face-color`, `scrollbar-shadow-color` 等属性来进行有限度的定制；然而，在现代开发实践中已较少见，因为新版本已经转向支持更广泛的标准方式。 #### 实现跨平台兼容性的建议方法 考虑到各浏览器间存在的差异，推荐采用渐进增强策略——先提供基础功能给所有用户，再为那些能够识别高级特性的用户提供额外美化效果。这不仅提高了网站的可访问性，也确保了良好的用户体验一致性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值