html解决设置滚动条右下角出现的白块

最新推荐文章于 2024-08-15 09:11:46 发布

原创最新推荐文章于 2024-08-15 09:11:46 发布 · 4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

本文详细介绍了如何使用CSS为网页滚动条定制样式，包括设置滚动条的宽度、颜色、背景以及轨道和 thumb 的外观。通过添加 ::-webkit-scrollbar-corner 规则，实现了滚动条角落的统一背景色，提升网页滚动体验。

在这里插入图片描述

// 定义滚动条的样式
::-webkit-scrollbar {
  width: 6px;
  height: 12px;
  background-color: #161f35;
}
::-webkit-scrollbar-thumb {
  background-color: #252f4a;
  border-radius: 20px;
}
/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

//只需要加上这一行
::-webkit-scrollbar-corner {
  background-color: #161f35;
}