您现在的位置是:网站首页> 编程资料编程资料
css设置滚动条颜色与样式以及如何去掉与隐藏滚动条CSS实现隐藏滚动条并可以滚动内容效果(三种方式)css设置Overflow实现隐藏滚动条的同时又可以滚动css 给div添加滚动并隐藏滚动条 css隐藏移动端滚动条并且ios上平滑滚动的方法CSS怎么隐藏滚动条(三种方法)css实现隐藏滚动条并可以滚动内容的实例代码
2021-09-07
886人已围观
简介 我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的
我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的
div {
scrollbar-face-color: #fcfcfc;
scrollbar-highlight-color: #6c6c90;
scrollbar-shadow-color: #fcfcfc;
scrollbar-3dlight-color: #fcfcfc;
scrollbar-arrow-color: #240024;
scrollbar-track-color: #fcfcfc;
scrollbar-darkshadow-color: #48486c;
scrollbar-base-color: #fcfcfc
}
滚动条样式主要涉及到如下CSS属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]
height: 120px; 设置区域的高度[像素/百分比等等]
SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色
网页中去掉滚动条:
去掉横向滚动条:
去掉竖向滚动条:
两个都去掉:
框加中去滚动条在name=""后面加 scrolling="No"
1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时,无论设置的"width"和"height"
的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内
容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。
auto 当内容超出范围时,显示滚动条,否则不显示。
应用:
没有水平滚动条:
没有垂直滚动条
没有滚动条
自动显示滚动条
test
复制代码
代码如下:div {
scrollbar-face-color: #fcfcfc;
scrollbar-highlight-color: #6c6c90;
scrollbar-shadow-color: #fcfcfc;
scrollbar-3dlight-color: #fcfcfc;
scrollbar-arrow-color: #240024;
scrollbar-track-color: #fcfcfc;
scrollbar-darkshadow-color: #48486c;
scrollbar-base-color: #fcfcfc
}
滚动条样式主要涉及到如下CSS属性:
overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容
overflow: auto; 在需要时内容会自动添加滚动条
overflow: scroll; 总是显示滚动条
overflow-x: hidden; 禁止横向的滚动条
overflow-y: scroll; 总是显示纵向滚动条
width: 568px; width: 98%; 设置区域的宽度[像素/百分比等等]
height: 120px; 设置区域的高度[像素/百分比等等]
复制代码
代码如下:SCROLLBAR-FACE-COLOR: 滚动条凸出部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: 滚动条空白部分的颜色
SCROLLBAR-SHADOW-COLOR: 立体滚动条阴影的颜色
SCROLLBAR-3DLIGHT-COLOR: 滚动条亮边的颜色
SCROLLBAR-ARROW-COLOR: 上下按钮上三角箭头的颜色
SCROLLBAR-TRACK-COLOR: 滚动条的背景颜色
SCROLLBAR-DARKSHADOW-COLOR: 滚动条强阴影的颜色
SCROLLBAR-BASE-COLOR: 滚动条的基本颜色
网页中去掉滚动条:
去掉横向滚动条:
去掉竖向滚动条:
两个都去掉:
框加中去滚动条在name=""后面加 scrolling="No"
1,Overflow内容溢出时的设置
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的值为visible、scroll、hidden、auto
visible 默认值。使用该值时,无论设置的"width"和"height"
的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内
容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。
auto 当内容超出范围时,显示滚动条,否则不显示。
应用:
没有水平滚动条:
没有垂直滚动条
没有滚动条
自动显示滚动条
2,自己定义滚动条的颜色
我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,
分别注释在下面的css代码的后面了,注意css的注释代码是放在两个斜杠内的两个星号之间,如:
复制代码
代码如下:Body {
scrollbar-arrow-color: #f4ae21;
scrollbar-face-color: #333;
scrollbar-3dlight-color: #666;
scrollbar-highlight-color: #666;
scrollbar-shadow-color: #999;
scrollbar-darkshadow-color: #666;
scrollbar-track-color: #666;
}
相关内容
- css固定table表头的实现代码可同时看到表头和表格底部利用纯css实现table固定列与表头中间横向滚动的思路和实例表格的头部固定效果通过css及jquery分别实现CSS实现表格首行首列固定和自适应窗口的实例代码
- css3制作动态进度条以及附加jQuery百分比数字显示
- CSS制作可输入内容的table表格 CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案IE6下伪类hover失效问题及解决办法a标签的四个css伪类(link、visited、hover、active)样式理解csshover.htc在IE7下使用:active伪类无效解决方法关于伪类hover的一些总结(推荐)
- 让ie浏览器支持RGBA颜色标准实现代码rgba中的a是什么意思 CSS之RGBA颜色指南颜色之ARGB与RGB、RGBA的区别与介绍详解css透明度之rgba和opacity的区别及兼容css中使用rgba和opacity设置透明度的区别(附图)完美解决IE8下不兼容rgba()的问题CSS3中使用RGBa来调节透明度的教程CSS3 RGBA色彩模式使用实例讲解CSS3的RGBA中关于整数和百分比值的转换CSS3中使用RGBA设置透明度的示例CSS通过RGBa将一个元素设置为透明效果
- CSS重置(CSS Reset) 让网页样式在各浏览器中表现一致css reset样式重置介绍 重置css样式工具分享全局CSS的设置(基础样式重置)CSS样式重置和清除(让不同浏览器显示效果一致)css reset 重置样式介绍让样式表CSS代码更加专业规范编写适合所有项目的通用的reset.cssCSS样式重置代码
- css使用客户端没有安装的字体语法解决方案CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css之六个为什么为您解答 性能与习惯的结合
- 纯CSS图片预加载实例 摆脱Javascript预载的束缚30种CSS3炫酷页面预加载loading动画特效源码炫酷纯CSS3预加载动画特效源码 3种CSS3 预加载Loading动画特效源码CSS控制前端图片HTTP请求的各种情况示例CSS 实现网页图片的预加载 纯CSS实现预加载动画效果
- Web页面中八种创建多列等高(等高列布局)的实现技术css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果