`
Dead_knight
  • 浏览: 1200938 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
博客专栏
752c8642-b795-3fe6-946e-a4e845bffdec
Spring Securi...
浏览量:240190
33caa84e-18a6-3036-a82b-6e2106a4de63
clojure专题
浏览量:48914
E17ca077-44df-3816-a3fe-471c43f6e1e5
WebLogic11g
浏览量:236872
社区版块
存档分类
最新评论

(转)被遗忘的知识-div滚动条属性及样式设置

    博客分类:
  • web
CSS 
阅读更多
当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 根据内容自动判断是否添加滚动条
原文:
http://apps.hi.baidu.com/share/detail/6012798
分享到:
评论

相关推荐

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

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

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

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

    视频播放 ---滚动条的设置

    以下是关于如何使用`jscroll.js`以及在视频播放中设置滚动条的一些关键知识点: 1. **初始化jscroll**: 在HTML中,你需要为视频时间轴的容器元素添加一个特定的类名,如`'jscroll'`,然后在JavaScript中调用`...

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

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

    div滚动条优化

    "div滚动条优化"这个主题主要关注如何在不牺牲滚动功能的前提下,通过CSS样式和JavaScript技术来美化或定制滚动条,使其更加符合现代网页的审美标准和用户体验需求。 首先,我们要了解默认滚动条的样式通常是浏览器...

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

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

    textArea滚动条样式

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

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

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

    一款好看的DIV+CSS滚动条

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

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

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

    js DIV滚动条随机位置的设置技巧.docx

    在 IE6 和 IE7 中,需要使用 `obj.scrollTop = obj.scrollHeight * (Math.random()) + 1`,以避免滚动条位置被设置为 0。 此外,这个技巧也可以与其他 JavaScript 技巧结合使用,例如,我们可以使用 JavaScript 来...

    纯css实现table滚动条(纯css实现div滚动条)

    纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.

    javascript经典特效---滚动条闪动的控制.rar

    在实现滚动条效果时,我们需要获取滚动条相关的DOM元素,这可能包括页面的body元素或其他包含滚动条的div。 2. **CSS样式控制**:JavaScript可以改变元素的CSS样式。对于滚动条,我们可能需要更改`scrollbar-color`...

    使用div做滚动条

    本文将详细介绍如何使用`&lt;div&gt;`标签及其相关的CSS属性来实现一个可自定义样式的滚动条。 #### DIV滚动条的基本概念 所谓DIV滚动条,是指在一个固定宽度和高度的`&lt;div&gt;`元素内部添加垂直或水平滚动条,以便于显示...

    让div滚动条初始化到最低位置的三种方法

    ### 让div滚动条初始化到最低位置的三种方法 在前端开发中,有时我们需要实现一个功能,即在向某个特定的`div`容器内添加新内容后,使该`div`的滚动条自动滚动到最底部,以确保新添加的内容能够立即呈现在用户的...

    jQuery实现将div的滚动条滚动到指定位置

    当需要控制div元素中的滚动条滚动到特定位置时,jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解几个基本概念: 1. **div**: 在HTML中,div(division)是一...

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

    在网页设计中,"DIV滚动悬浮层"是一种常见的交互效果,它使得某个元素(通常是一个包含重要信息或功能的div)在用户滚动页面时始终保持在屏幕的特定位置,提供持续的可视性和可访问性。这种效果可以用于侧边栏菜单、...

    vue.js-div滚动条隐藏但有滚动效果的实现方法

    组件被包在一个高度固定的div mounted () { var boDiv = document.getElementById(this.id); if(boDiv == undefined){ return; } var isFirefox=navigator.userAgent.indexOf("Firefox") if(isFirefox&gt;0){ ...

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

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

Global site tag (gtag.js) - Google Analytics