优化Webkit滚动条：实现滑块内边距与边界的精准控制

<div id="cont">
  <img class="imgbg" src="https://cdn.discordapp.com/attachments/940072943424270426/994052217600487524/mana_birra.jpg" alt="背景图片">
  <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>

@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 {
  /* 可以为轨道设置背景、圆角等 */
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; /* 示例中轨道有特殊圆角 */
  /* background: #f1f1f1; */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #aa0000; /* 滑块的背景颜色 */
  border-radius: 9999px; /* 使滑块呈圆形或椭圆形 */
  /* 关键修改：通过透明边框和 background-clip 模拟内边距 */
  border: 4px solid rgba(0, 0, 0, 0); /* 创建一个4像素的透明边框 */
  background-clip: padding-box; /* 确保背景色只在内边距区域内显示，不延伸到边框下 */
}

/* 滚动条按钮 */
::-webkit-scrollbar-button {
  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);
}

::-webkit-scrollbar-thumb {
  background: #aa0000; /* 滑块的实际颜色 */
  border-radius: 9999px; /* 使滑块呈圆形或椭圆形 */
  border: 4px solid rgba(0, 0, 0, 0); /* 创建一个4像素宽的透明边框 */
  background-clip: padding-box; /* 确保背景色只在内边距区域内显示 */
}