css的滚动条

CSS的滚动条样式

css学了太久了;都快忘了,唉~
先上效果图吧
在这里插入图片描述
这里有一个滚动条
用原生的css写挺简单的

.scroll {
		overflow-x: hidden;   // X轴的
		overflow-y: auto;     // Y轴的
	}

但是,就是有点…;一言难尽的味道
在这里插入图片描述
这是什么****滚动条啊

让我加点样式啊

	.scroll::-webkit-scrollbar {  /* 滚动条宽、高 */
		width: 6px;
	}

	.scroll::-webkit-scrollbar-thumb {   /* 滚动条 拖动条 */
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 5px #ADAD9D;
		background: #ADAD9D;
	}

	.scroll::-webkit-scrollbar-track {   /* 滚动条背景槽 */
		-webkit-box-shadow: inset 0 0 5px #ADAD9D;
		border-radius: 10px;
		background: #E6E1D1;
	}

效果图就是这样啦
在这里插入图片描述
这里没做兼容,仅仅只是谷歌内核的;我查了很多资料;火狐和IE,他不能自定义滚动条的形式;但是可以改变各种color样式;查到的都是建议隐藏起来;或者自己重写一个滚动条;毕竟粗粗大大的滚动条嵌到内部就真的有点影响布局了

如果大家有什么关于兼容多浏览器滚动条的文章或者是本文章哪里有问题都可以在评论区留言;不喜勿喷,嘻嘻!

参考了以下两篇文章:
小天地,大世界
CSS 滚动条样式【兼容chrome、Firefox、IE】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值