更改滚动条样式

本文详细介绍了如何使用CSS自定义滚动条的样式,包括滚动条的高宽、背景颜色、轨道阴影、圆角、滑块样式以及滚动条按钮的样式。通过具体的代码示例,展示了如何实现一个美观且符合网站风格的滚动条。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background-color: #113b9f;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #113b9f;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  //-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #3d83ff;
}

/* 定义滚动条渐增按扭的样式 */
::-webkit-scrollbar-button:end:increment {
  background: #143b9a url('images/scroll_cntrl_up.png') no-repeat center;
  background-size: 10px 10px;
  border-top: 0;
  width: 100%;
}

/* 定义滚动条渐减按扭的样式 */
::-webkit-scrollbar-button:start:decrement {
  background: #143b9a url('images/scroll_cntrl_dwn.png') no-repeat center;
  background-size: 10px 10px;
  width: 100%;
}

 

转载于:https://www.cnblogs.com/ouchen0312/p/9796922.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值