CSS修改浏览器侧边滚动条样式

浏览器默认的滚动条是不太美观的,有时候网站整体设计的比较漂亮的时候,可能因为默认的滚动条而影响了整体美观。这个有没有办法解决呢?

当然,把下面的css放到网站的主样式style.css中即可,都有注释,可自行修改:

::-webkit-scrollbar { /*滚动条整体样式*/
    width: 5px; /*滚动条的宽度*/
}
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    background-color: #ee3f4d; /*纯色滚动条*/
    /*background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);*/ /*彩色滚动条*/
}
::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #fff;
}

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服:1377177670@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载或失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有米币奖励和额外收入!

哈米酷 前端技术 CSS修改浏览器侧边滚动条样式 https://www.hmkoo.com/624.html

互联网优质源码素材教程共享下载平台

常见问题
  • 本站除独家和商用资源外的所有资源版权均属于原作者所有,这些资源均只能用于参考学习使用,请于下载后的24个小时之内,从您的电脑中彻底删除上述内容资源,切勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完的压缩包与网盘上的容量,若小于网盘提示的容量则是不完整的原因。这是浏览器下载的bug,建议用百度网盘。
查看详情

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务

var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?215bcbbc9cb1e27ac7f7ef39e07850c4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();
CSS修改浏览器侧边滚动条样式-海报

分享本文封面