当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 ;
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 根据内容自动判断是否添加滚动条
<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-
分享到：
相关推荐
### DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏 #### 概述 在Web开发过程中，滚动条的样式和行为对于提升用户体验至关重要。通过CSS（层叠样式表），开发者可以自定义滚动条的外观、行为以及是否显示或隐藏。本...
本篇文章详细介绍了 DIV 滚动条的样式设置，包括如何实现 DIV 滚动条、DIV 滚动条的样式设置和滚动条颜色属性。通过设置 `overflow` 属性和滚动条颜色属性，可以实现 DIV 元素的滚动条样式设置。
"div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下，通过CSS样式和JavaScript技术来美化或定制滚动条，使其更加符合现代网页的审美标准和用户体验需求。 首先，我们要了解默认滚动条的样式通常是浏览器...
...
在Android平台上，开发一款手机版浏览器时，可能会遇到一个常见的问题：在特定情况下，网页中的`div`元素的滚动条无法正常工作。这个问题通常是由于Android原生浏览器或自定义WebView组件的某些特性引起的。本文将...
而当这些`div`元素中的内容超出其设定的宽度或高度时，滚动条就会出现，以帮助用户浏览不可见的部分。在本文中，我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式，以提升网页的视觉效果和用户体验。 一、...
在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条
### 让div滚动条初始化到最低位置的三种方法 在前端开发中，有时我们需要实现一个功能，即在向某个特定的`div`容器内添加新内容后，使该`div`的滚动条自动滚动到最底部，以确保新添加的内容能够立即呈现在用户的...
网页局部div随滚动条置顶滚动是一种常见的网页交互设计，常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，...
通过这种方式，当页面滚动时，悬浮层会根据我们的需求进行动态调整，实现"滚动条动，层不动"的效果。 当然，实际的项目可能会更复杂，比如要考虑不同设备的响应式布局，或者添加动画效果等。但以上基础步骤已经涵盖...
本文将重点讨论三个常见的JS实用技巧：屏蔽错误、div滚动条设置以及背景图片位置的调整。 首先，我们来看如何使用JavaScript来屏蔽错误。在某些情况下，我们可能希望在遇到错误时提供一个友好的提示，而不是让...
js DIV 滚动条随机位置的设置技巧 在 Web 开发中，DIV 滚动条是非常常见的交互元素，而随机设置 DIV 滚动条的位置可以增加用户体验的随机性和趣味性。今天，我们将介绍如何使用 JavaScript 实现 DIV 滚动条的随机...
例如，我们可以通过设置`background-image`属性为图片URL，将滚动条滑块设计成具有特定图案或渐变效果。 JavaScript（可能在`script.js`或类似文件中）在某些情况下可能用于增强滚动条交互，例如添加动画效果、响应...
在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...
2. `-webkit-scrollbar-thumb`：用于定义滚动条滑块部分的样式，可以设置背景颜色、边框和圆角等。 3. `-webkit-scrollbar-track`：定义滚动条轨道的样式。 4. `-webkit-scrollbar-thumb:hover`：当滑块被鼠标悬停时...
### 完美解决ASP.NET回传后div滚动条位置复位的问题 在ASP.NET开发过程中，经常遇到的一个问题是页面更新或回传后，原本已经滚动的`div`元素会自动复位到初始状态，这对于用户体验来说是十分不利的。本文将详细介绍...
标题中的“jquery定制div滚动条Scrollbar”涉及到的是一个使用jQuery库来实现自定义滚动条功能的技术。在网页设计中，滚动条通常是浏览器默认样式，但通过jQuery插件，我们可以为div元素创建具有个性化外观和交互...
此外，为了保持滚动条被隐藏时内容的正确显示，应该将滚动条出现时隐藏的多余空间也设置为隐藏，即设置tableContainer的overflow属性为hidden。这样一来，即使在某些情况下滚动条宽度被隐藏了，也不会影响表格的布局...