作者:sylvia | 来源:互联网 | 2020-08-02 03:04
页面布局中,当内容超出盒子时,为了美观,会将超出的部分设置滚动条效果,有些浏览器默认的滚动条非常的丑,那你知道如何修改滚动条样式吗?这篇文章将会教你怎么设置滚动条样式。
页面布局中,当内容超出盒子时,为了美观,会将超出的部分设置滚动条效果,有些浏览器默认的滚动条非常的丑,那你知道如何修改滚动条样式吗?这篇文章将会教你怎么设置滚动条样式。
/*作为IT界最前端的技术达人,页面上的每一个元素的样式我们都必须较真,就是滚动条我们也不会忽略。下面我给大家分享一下如何通过CSS来控制滚动条的样式,代码如下:*/ 1 /*定义滚动条轨道*/
#style-2::-webkit-scrollbar-track
{
background-color: #F5F5F5;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
}
/*定义滚动条高宽及背景*/
#style-2::-webkit-scrollbar
{
width: 10px;
background-color: rgba(0, 0, 0, 0.34);
}
/*定义滚动条*/
#style-2::-webkit-scrollbar-thumb
{
background-color: #8b8b8b;
border-radius: 10px;
}
要实现单个div里面的内容滚动,需要满足三个条件:
1、div必须设定固定的高度,不能使用百分比或 auto 等弹性值。
2、其中的内容高度必须超过它本身的高度。
3、必须添加属性 “overflow:auto”。
隐藏滚动条:
1、去掉水平方向的滚动条:
2、去掉垂直方向的滚动条:
3、隐藏横向、显示纵向滚动条:
4、隐藏全部滚动条:
或者
更好的方法就是把滚动条的颜色设置为完全透明,这样既可以实现内容的滚动,又达到不显示滚动条的目的。
应用:
没有水平滚动条:
test
没有垂直滚动条
test
没有滚动条
test
自动显示滚动条
test
自己定义滚动条的颜色,代码如下:
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; /*立体滚动条背景颜色*/
scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}
以上2项适用与、
推荐阅读
-
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
-
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
-
-
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
-
本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
[详细]
蜡笔小新 2023-12-13 13:58:25
-
本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ...
[详细]
蜡笔小新 2023-12-13 13:24:33
-
本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ...
[详细]
蜡笔小新 2023-12-13 12:54:29
-
在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
[详细]
蜡笔小新 2023-12-13 12:08:09
-
猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ...
[详细]
蜡笔小新 2023-12-13 12:04:03
-
本文讲解了CSS中标签选择器、类名选择器和ID选择器的使用区别,主要包括加空格和不加空格的区别。通过示例代码,说明了加空格表示选择当前节点的后代节点,而不加空格表示一个元素的多个类名不能加空格的规则。 ...
[详细]
蜡笔小新 2023-12-13 09:13:35
-
一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ...
[详细]
蜡笔小新 2023-10-17 14:35:15
-
本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ...
[详细]
蜡笔小新 2023-10-17 13:38:49
-
Imnotunderstandingastowhythetrianglewhichappearswhenthemousehoversoverthemenuitem, ...
[详细]
蜡笔小新 2023-10-16 11:26:13
-
第一步.hs1{float:left;.mt(.25rem);.ml(.12rem);width:.3rem; ...
[详细]
蜡笔小新 2023-10-15 12:56:39
-
canvas画图经常发现他是模糊的。解决这个问题主要从两个方面下手。改变canvas渲染的像素情况:画1像素的线条看起来模糊不清,好像更宽的样子。解决方 ...
[详细]
蜡笔小新 2023-10-14 13:22:21
-
之前我曾经写过一篇关于CSS的border-image属性的文章。现在几乎所有的现代浏览器都支持这个属性——除了IE10及以下IE版本。看起来这是一个非常 ...
[详细]
蜡笔小新 2023-10-13 16:23:53
-