CSS实现透明覆盖式滚动条：优化用户体验与界面设计

div {
  height: 100px; /* 示例高度，确保内容溢出 */
  background-color: lightblue; /* 示例背景色 */
  overflow: overlay; /* 关键：使滚动条覆盖内容 */
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px; /* 滚动条的宽度 */
}

*::-webkit-scrollbar-track {
  background: #ffffff25; /* 轨道背景，25%透明度的白色 */
}

*::-webkit-scrollbar-thumb {
  background-color: #00000025; /* 滑块背景，25%透明度的黑色 */
  border-radius: 10px; /* 滑块圆角 */
  border: 3px none #00000025; /* 滑块边框，此处设置为none，保持简洁 */
}

/* Firefox */
* {
  scrollbar-width: auto; /* 滚动条宽度，auto为默认，thin为细 */
  scrollbar-color: #00000025 #ffffff25; /* 滑块颜色 轨道颜色 */
}

/* 容器样式 */
div {
  height: 200px; /* 示例高度 */
  background-color: #e0f7fa; /* 示例背景色，可根据实际需求调整 */
  overflow: overlay; /* 使滚动条覆盖内容 */
  padding: 10px; /* 示例内边距 */
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* ===== 滚动条 CSS 样式 ===== */
/* 适用于 Firefox 浏览器 */
* {
  scrollbar-width: auto; /* 自动宽度 */
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.15); /* 滑块颜色 轨道颜色 */
}

/* 适用于 Chrome, Edge, 和 Safari 浏览器 */
*::-webkit-scrollbar {
  width: 12px; /* 滚动条宽度 */
}

*::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.15); /* 轨道背景，低透明度白色 */
  border-radius: 6px; /* 轨道圆角 */
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25); /* 滑块背景，低透明度黑色 */
  border-radius: 6px; /* 滑块圆角 */
  border: 3px solid transparent; /* 边框透明，使滑块看起来更细 */
}

/* 鼠标悬停时滑块样式 */
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.4); /* 悬停时颜色加深 */
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus scelerisque facilisis. Etiam vestibulum neque at ornare lacinia. Phasellus malesuada massa vel dapibus volutpat. Donec elit metus, mollis id egestas vel, mattis et felis. Duis rutrum diam eu lacus molestie mollis. Phasellus interdum imperdiet vehicula. Morbi eget ex massa.</p>
  <p>Curabitur interdum semper mauris non efficitur. Ut eros ipsum, blandit sit amet hendrerit sed, tincidunt nec est. Duis finibus posuere orci sit amet semper. Ut quis ligula nec purus elementum accumsan quis id felis. Sed eget imperdiet dui. Suspendisse faucibus porttitor massa. Proin auctor, libero ut pharetra ullamcorper, arcu enim lobortis tellus, in mollis mi turpis vitae nibh. Pellentesque eget neque pharetra, ornare diam quis, vehicula risus. Phasellus pellentesque facilisis enim, vitae elementum augue. Phasellus ac vulputate nunc. Morbi non ante gravida, mattis nisi eu, ullamcorper sem. Nullam egestas ligula ut lectus dapibus vehicula. In in erat viverra, sagittis odio a, venenatis erat. Nunc ut nunc scelerisque, egestas sapien sed, venenatis lorem. Vivamus fringilla nunc leo, in dictum tortor vehicula vitae.</p>
  <p>Donec eleifend est in felis molestie convallis. Etiam dolor ligula, lobortis eu molestie feugiat, aliquam eget ligula. Quisque tempor ornare enim, sed varius mi vestibulum sit amet. In at vestibulum ligula. Vivamus pretium non purus vel scelerisque. Pellentesque a mauris sit amet orci lobortis pellentesque. In purus nulla, maximus non sapien vitae, rhoncus tristique arcu. In placerat dui vel iaculis commodo. Nullam malesuada suscipit nulla, at scelerisque tortor vulputate at. In a diam at libero cursus bibendum in vitae libero. In tortor magna, ornare nec massa vitae, sagittis tincidunt turpis.</p>
  <p>Proin malesuada in lectus vitae suscipit. Sed nibh risus, accumsan vel enim vel, mattis porta augue. Aliquam et lacinia neque. Etiam pellentesque tempor augue eget ullamcorper. Aenean dictum efficitur dolor sed ultrices. Donec vitae euismod odio. Nam quis posuere ante. Fusce quis sagittis nulla, sit amet gravida urna. Nulla facilisi. Vivamus id auctor mi. Curabitur pellentesque risus et tortor viverra, vitae pretium ex fringilla. Mauris efficitur maximus lorem vitae hendrerit. Cras efficitur sollicitudin sapien sed dignissim. Duis fermentum imperdiet tincidunt. Praesent augue justo, elementum eu pharetra in, iaculis quis ipsum. Donec sit amet varius arcu, in dictum risus.</p>
  <p>Ut ex urna, scelerisque quis augue a, viverra bibendum ligula. Aliquam iaculis dolor quis dolor finibus consectetur. Integer vehicula, turpis sed sollicitudin cursus, est justo posuere elit, non facilisis massa nulla id ligula. Duis tempus, sem vel congue scelerisque, augue mauris efficitur tortor, nec commodo magna sapien et eros. Donec ultrices dui mi, ut malesuada odio ornare a. Duis auctor, ex eu ultricies semper, leo diam consequat turpis, eu ornare felis velit rhoncus quam. Vestibulum lacinia ipsum nec ipsum laoreet faucibus. Mauris sed eros sem. Morbi a tellus quam. Nulla porttitor scelerisque massa eu efficitur. In metus libero, viverra fermentum accumsan et, tristique a ipsum. Proin lacinia tortor leo, facilisis volutpat ante elementum vel. Pellentesque sed ipsum ut sem lobortis mollis sed sit amet dolor. Pellentesque vulputate, justo id eleifend congue, felis enim consectetur nibh, id malesuada ipsum enim nec lectus.</p>
</div>