掌握CSS滚动条定制：解决滑块溢出问题与美化技巧

/* 针对整个滚动条的样式 */
::-webkit-scrollbar {
  width: 12px; /* 定义滚动条的宽度 */
}

/* 针对滚动条轨道的样式 */
::-webkit-scrollbar-track {
  /* 轨道可以有自己的背景、圆角等 */
  /* background: #f1f1f1; */
  /* border-radius: 9999px; /* 例如，使轨道也圆角 */
}

/* 针对滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background-color: #aa0000; /* 滑块的背景色 */
  border-radius: 9999px; /* 使滑块呈现圆角，例如胶囊状 */
  /* 关键：利用透明边框和 background-clip 实现内嵌效果 */
  border: 4px solid rgba(0, 0, 0, 0); /* 4px 的透明边框 */
  background-clip: padding-box; /* 背景只填充到内边距区域，不包括边框 */
}

/* 针对滚动条两端的按钮（如果存在） */
::-webkit-scrollbar-button {
  /* background-color: #555; */
  /* border-radius: 100px; */
}

@font-face {
  font-family: gothicpixel;
  src: url(https://dl.dropbox.com/s/69gsw1ubmz94bh2/DoubleHomicide.ttf);
}

#cont {
  width: 300px;
  height: 300px;
  border-style: solid;
  border-width: 10px;
  border-image: url("https://cdn.discordapp.com/attachments/657655298613575691/853068735812206612/lace-border-png-37013.png") 60 fill round;
  border-radius: 0px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(.7px .5px 1px white) drop-shadow(.7px .5px 1px white);
}

.imgbg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
}

#float {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100px;
  text-align: center;
  z-index: 1;
  font-family: gothicpixel;
  font-size: 50px;
  font-weight: regular;
  color: #aa0000;
  text-shadow: -.9px 0 #fff, 0 .9px #fff, .9px 0 #fff, 0 -.9px #fff, 0 0;
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

#scroll {
  opacity: 0;
  position: absolute;
  margin-left: 4%;
  width: 250px;
  top: 140px;
  border: 1px solid black;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding: 10px;
  height: 110px;
  overflow: scroll;
  background: #FFFFFF90;
  transition: opacity .35s ease;
  font-size: 14px;
  font-family: wow;
  color: #000;
  text-align: center;
  overflow-x: hidden; /* 隐藏水平滚动条 */
}

/* --- 滚动条定制样式 --- */
::-webkit-scrollbar {
  width: 12px; /* 整体滚动条宽度 */
}

::-webkit-scrollbar-track {
  /* 滚动条轨道的样式，可以保持默认或添加背景、圆角等 */
  /* background: rgba(0,0,0,0.1); */
  /* border-radius: 9999px; */
}

::-webkit-scrollbar-thumb {
  background-color: #aa0000; /* 滑块颜色 */
  border-radius: 9999px; /* 使滑块呈胶囊状 */
  /* 关键：透明边框和背景剪裁，确保滑块内嵌 */
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}

::-webkit-scrollbar-button {
  /* 滚动条两端按钮的样式 */
  /* display: none; /* 如果不需要按钮可以隐藏 */
  /* border-radius: 100px; */
}
/* --- 滚动条定制样式结束 --- */

#cont:hover #scroll {
  opacity: 1;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(circle, transparent 35%, black 165%);
}

#cont:hover #overlay {
  width: 100%;
  background: radial-gradient(circle, transparent 1%, black 199%, black 150%, black 100%, black 75%, black 50%, black 25%, gray 200%);
  transition: background 4s ease-in-out;
  transition-timing-function: cubic-bezier(1, 1, 1, 1);
}

<div id="cont">
  <img class="imgbg" src="https://cdn.discordapp.com/attachments/940072943424270426/994052217600487524/mana_birra.jpg">
  <div id="float"> tomy </div>
  <div id="overlay"> </div>
  <div id="scroll"> hi this is <strong>bold</strong> and this is <em>italic</em> and <s>strikethrough</s> Cupcake ipsum dolor sit amet. Shortbread ice cream gingerbread cake cheesecake donut muffin cupcake. Wafer sweet shortbread tiramisu cotton candy cake I love jujubes cheesecake. Oat cake shortbread jujubes gummies croissant ice cream. Gummies dragée jujubes gummies liquorice apple pie. Jelly-o I love bonbon muffin sugar plum I love. Pudding cheesecake oat cake halvah tiramisu tootsie roll I love brownie. Liquorice gingerbread cupcake toffee marshmallow sweet lemon drops. Cupcake carrot cake bear claw muffin wafer gummi bears halvah. Sweet fruitcake liquorice halvah sweet. Pastry cupcake I love cheesecake croissant liquorice cotton candy. Jelly-o chocolate candy canes I love fruitcake tart I love carrot cake. Candy I love cupcake chocolate bar oat cake I love. Sugar plum shortbread tart pie pastry.
  </div>
</div>

::-webkit-scrollbar-thumb {
  background-image: url('path/to/your/custom-thumb.png');
  background-size: cover; /* 确保图片覆盖整个滑块区域 */
  background-repeat: no-repeat;
  /* 同样可以结合 border 和 background-clip 来控制图片与边缘的距离 */
  border: 2px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 0; /* 如果图片本身有形状，则无需圆角 */
}