代码:

/* 滚动轴样式 */
// 滚动轴整体,主要设置宽度
::-webkit-scrollbar {
	width : 10px;
	height: 10px;
}

// 滚动轴的背景区域
::-webkit-scrollbar-track {
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1); 
	border-radius: 0px;
	background   : rgba(0, 0, 0, 0.1);
}

// 滚动轴
::-webkit-scrollbar-thumb {
	border-radius: 5px;
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
	background   : rgba(0, 0, 0, 0.1);
}

// 滚动轴浮动样式
::-webkit-scrollbar-thumb:hover {
	border-radius: 5px;
	box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
	background   : rgba(189, 118, 118, 0.3);
}

说明

  • 如果针对某div的滚动轴单独设置样式,给该div设置一个类,然后在此类下面设置上面样式;
  • 这里只是简单的设置方式,在chrome中生效,其他浏览器未测试

推荐一个滚动轴样式设置的文章

相关文章:

  • 2021-06-21
  • 2021-06-09
  • 2022-02-08
  • 2022-12-23
  • 2021-12-18
  • 2022-12-23
猜你喜欢
  • 2021-10-07
  • 2021-12-04
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-04
  • 2021-11-14
相关资源
相似解决方案