`
zpball
  • 浏览: 917118 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV滚动条属性及样式设置方式

    博客分类:
  • CSS
css 
阅读更多
这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。

DIV滚动条属性及样式设置

所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能大约是为了节约页面空间,就是所谓的“缩地”了。

当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置DIV滚动条相关的属性。
<styletylestyletyle="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却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll总是显示滚动条

hidden没有滚动条,超出区域的内容不可见

auto根据内容自动判断是否添加滚动条

2.DIV滚动条颜色属性:

face-color:滑块颜色

hightlight-color:高亮颜色

3dlight-color:三维光线颜色

darkshadow-color:暗影颜色

shadow-color:阴影颜色

arrow-color:箭头颜色

track-color:滑道颜色

base-color:DIV滚动条的主要颜色,其中包含滚动按钮和滚动滑块

3.overFlow-xoverFlow-y

visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll总是显示滚动条

hidden没有DIV滚动条,超出区域的内容不可见

auto根据内容自动判断是否添加滚动条
分享到:
评论

相关推荐

    div滚动条 带滚动条的div div滚动条样式

    本篇文章详细介绍了 DIV 滚动条的样式设置,包括如何实现 DIV 滚动条、DIV 滚动条的样式设置和滚动条颜色属性。通过设置 `overflow` 属性和滚动条颜色属性,可以实现 DIV 元素的滚动条样式设置。

    div css 滚动条样式 DIV滚动条属性及样式设置方式

    本文将详细介绍如何通过CSS来设置`div`标签内的滚动条属性和样式。 首先,要让`div`元素显示滚动条,我们需要设置`overflow`属性。这个属性决定了当内容溢出元素边界时的处理方式。有以下几个可选值: 1. `visible...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    一款好看的DIV+CSS滚动条

    2. `-webkit-scrollbar-thumb`:用于定义滚动条滑块部分的样式,可以设置背景颜色、边框和圆角等。 3. `-webkit-scrollbar-track`:定义滚动条轨道的样式。 4. `-webkit-scrollbar-thumb:hover`:当滑块被鼠标悬停时...

    Android手机版浏览器DIV滚动条失效解决方案

    2. **CSS样式问题**:错误的CSS设置,如`overflow`属性设置不当,可能导致滚动条无法显示或工作。 3. **WebView设置问题**:WebView的默认配置可能阻止了滚动条的正常工作,例如禁用了JavaScript或者设置了不恰当的...

    网页局部div随滚动条置顶滚动

    网页局部div随滚动条置顶滚动是一种常见的网页交互设计,常用于新闻网站、电商页面或者任何需要突出显示特定内容的场景。这种效果使得用户在滚动页面时,某个div元素(通常包含重要信息或导航)始终保持在视口顶部,...

    textArea滚动条样式

    创建覆盖在`textarea`上的透明div,监听滚动事件,手动调整div的位置以模拟滚动条效果。这种方法较复杂,需要考虑更多的边界情况和性能优化。 4. **浏览器检测与条件样式** 可以使用JavaScript检测浏览器类型,...

    DIV滚动悬浮层(滚动条动,层不动)

    通过这种方式,当页面滚动时,悬浮层会根据我们的需求进行动态调整,实现"滚动条动,层不动"的效果。 当然,实际的项目可能会更复杂,比如要考虑不同设备的响应式布局,或者添加动画效果等。但以上基础步骤已经涵盖...

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

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

    滚动条,div滚动条,图层下拉条

    例如,我们可以通过设置`background-image`属性为图片URL,将滚动条滑块设计成具有特定图案或渐变效果。 JavaScript(可能在`script.js`或类似文件中)在某些情况下可能用于增强滚动条交互,例如添加动画效果、响应...

    vue自定义浏览器滚动条(兼容大部分浏览器含ie)_vue tree组件 下拉滚动条

    这通常涉及到事件绑定和计算属性,以确保滚动条与数据同步。 总结来说,自定义Vue中的滚动条需要考虑浏览器兼容性,可以借助第三方库解决这个问题。同时,我们可以通过CSS和JavaScript来控制滚动条的样式和行为。在...

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

    此外,为了保持滚动条被隐藏时内容的正确显示,应该将滚动条出现时隐藏的多余空间也设置为隐藏,即设置tableContainer的overflow属性为hidden。这样一来,即使在某些情况下滚动条宽度被隐藏了,也不会影响表格的布局...

    使用div做滚动条

    这种技术通常被称为“DIV滚动条”,其实现方式主要是通过HTML的`&lt;div&gt;`标签结合CSS样式来完成。本文将详细介绍如何使用`&lt;div&gt;`标签及其相关的CSS属性来实现一个可自定义样式的滚动条。 #### DIV滚动条的基本概念 ...

    利用div+jquery自定义滚动条

    在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...

    div随滚动条上下滚动

    在网页设计中,"div随滚动条上下滚动"是一种常见的动态效果,通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现,以增加用户体验,使某些元素如导航栏、侧...

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

    例如,如果你想让一个div元素在内容超出时显示滚动条,可以这样设置: ```css div { width: 200px; height: 200px; overflow: auto; } ``` 接下来,我们讨论如何隐藏滚动条。如果希望在某些情况下隐藏滚动条,...

    CSS样式设置div滚动条示例代码

    CSS(层叠样式表)是用于描述网页样式的标记语言...总结来说,通过上述的CSS属性和值的设置,可以完成对div滚动条样式的定制,让滚动条与网页的整体设计风格相匹配。这样既增强了用户界面的美观性,也提高了用户体验。

    滚动条样式设置

    本主题将深入探讨“滚动条样式设置”,讲解如何使用JavaScript来实现自定义滚动条样式,并确保其在多浏览器环境下,包括IE,具有良好的兼容性。 一、滚动条的基本样式 默认情况下,滚动条具有操作系统特定的样式,...

    div不随滚动条的移动而改变位置

    标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位(fixed positioning)的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置,即使用户滚动页面,它也不会移动。这通常用于创建...

Global site tag (gtag.js) - Google Analytics