CSS3自定义滚动条

最新推荐文章于 2022-09-28 10:38:08 发布
最新推荐文章于 2022-09-28 10:38:08 发布
阅读量304 收藏
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abigflower/article/details/100042167
版权 
<html lang="en"><head>
	<meta charset="UTF-8">
	<title>CSS3自定义滚动条</title>
<style>
header
{
	font-family: 'Lobster', cursive;
	text-align: center;
	font-size: 25px;	
}

#info
{
	font-size: 18px;
	color: #555;
	text-align: center;
	margin-bottom: 25px;
}

a{
	color: #074E8C;
}

.scrollbar
{
	margin-left: 30px;
	float: left;
	height: 300px;
	width: 65px;
	background: #F5F5F5;
	overflow-y: scroll;
	margin-bottom: 25px;
}

.force-overflow
{
	min-height: 450px;
}

#wrapper
{
	text-align: center;
	width: 500px;
	margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #D62929;
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
	background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#style-4::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#style-5::-webkit-scrollbar
{
	width: 10
最低0.47元/天 解锁文章
abigflower
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解css3自定义滚动条样式写法
01-19
本文介绍了css3自定义滚动条样式写法，分享给大家，具体如下： 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动...
html左边图片右边文字_HTML中一些常见的特殊标签样式属性
weixin_39905037的博客
11-29 4145
接着橙先生上一篇的常见样式属性，可以用在绝大多数的标签中，如div、sapn、p等标签中，这篇继续讲样式属性，不过是一些特殊标签的样式属性。废话不多说，直接往下看1、Img标签也有橙先生上一篇文章中介绍的常见样式属性，另外如上所见它也有自己特殊的属性src和alt属性，img就是图片标签，那么src就是引入图片的属性，其中输入图片路径地址即可，而alt属性是对图片的描述文字，当图片不能正常显示时，...
CSS 滚动条 自定义
weixin_44540416的博客
08-07 113
CSS <style> header { font-family: 'Lobster', cursive; text-align: center; font-size: 25px; } #info { font-size: 18px; color: #555; text-align: center; margin-bottom: 25px; } a{ col...
css3 自定义滚动条样式
似水流年QC的博客
09-28 990
目前市场现在浏览器自带的原始滚动条很不美观，简直就是页面的一大败笔， 不同的浏览器有着不同的展现样式，五花八门。同时也有看到很多网站的自定义滚动条显得高端，在体验上也显得舒服了很多，现在讲解一下自定义滚动条的实现。若是水平滚动条，则width属性不起作用，height属性用来控制滚动条相应部分竖直方向高度；若是竖直滚动条，则height属性不起作用，width属性用来控制相应部分的宽度。滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。
CSS3自定义滚动条样式 -webkit-scrollbar
sweetyhyh的博客
04-20 2274
lang="en">     charset="UTF-8">   CSS3自定义滚动条     header   {   font-family: 'Lobster', cursive;   text-align: center;   font-size: 25px;  
CSS3自定义滚动条样式的示例代码
09-22
本篇文章主要介绍了CSS3自定义滚动条样式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
11-20
windows 下默认的滚动条样式巨丑，项目中又有比较多地方会显示滚动条， 故回头翻了一下CSS3， 还真能不用插件实现自定义滚动条的样式，正合我意 代码如下： /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ :...
一些vue功能和css样式
W936438835的博客
03-17 1980
更新中...点击加载更多数据、分页、跳转传参、css文本内容超出显示省略号、美化滚动条、表单验证
设置滚动条样式和placeholder样式
weixin_41674235的博客
02-11 1098
设置滚动条样式和placeholder样式
滚动条样式设置
weixin_49651654的博客
02-18 172
需要使用滚动条的地方可以使用 overflow-y:scroll /* 设置滚动条的样式 / ::-webkit-scrollbar { width:12px; } / 滚动槽 / ::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(0,0,0,0.3); border-radius:10px; } / 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-radius:10px; background
css修改浏览器默认滚动条样式
qq_44417271的博客
05-25 1027
/*滚动条样式*/ ::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } ::-webkit-scrollbar-track { -webkit-box-s.
ant design vue中menu组件递归渲染报错解决
牛先森家的博客
06-28 1972
ant design vue中menu组件递归渲染报错解决
重构-滑块(拉动条)
weixin_43294560的博客
11-27 245
实现: hooks实现 动画: 提示框渐变显示 参数: disabled: PropTypes.bool, 禁用 onChange: PropTypes.func, 拉动回调,第一个参数是进度数值,防抖默认200毫秒 value: PropTypes.number, 初始进度值,0-10 sliderHeight:PropTypes.string, 滑块高度 sliderWdith: PropTypes.string, 滑块宽度 sliderColor: PropTypes.str
纯css制作的漂亮好看的进度条
mituan1234567的专栏
04-12 1141
http://www.jb51.net/css/27189.html       new document       .process-bar  {  width:100px;  display:inline-block;  *zoom:1;  }  .pb-wrapper  {  border:1px solid gray;  border-style:s
html如何做滑动门效果,JavaScript实现滑动门效果
weixin_39879881的博客
06-03 597
本文实例为大家分享了JavaScript实现滑动门效果的具体代码，供大家参考，具体内容如下一、什么是滑动门首先你要了解什么是滑动门。生活中我们经常看到一些网站或是商城有一些滑动门的效果那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法,二、实现滑动门所需技术1、简单的HTML基础知识2、简单的CSS基础样式3、基本的javascript知识三、如何实现滑动门(重点)准备好一段HTML代...
css 自定义滚动条
最新发布
09-22
CSS提供了一种自定义滚动条的方法。可以使用`::-webkit-scrollbar`伪元素来设置整个滚动条的样式，使用`::-webkit-scrollbar-thumb`来设置滑块的样式，使用`::-webkit-scrollbar-track`来设置轨道的样式。可以使用`:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值