Html 如何设置自定义滚动条的边距？

我试图在滚动条和div容器的上边框和下边框之间留出一些空间。换句话说，我正在尝试使滚动条轨迹更短

这是我的css：

::-webkit-scrollbar {
      width: 8px;
      height: 300px ;
      background-color: grey;
      border-radius: 5px;
      border: solid 12px transparent;
      margin-top: 10px;
      margin-bottom: 10px;

}
::-webkit-scrollbar-thumb {
      background: red;

      border-radius: 5px;
      width: 8px;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
      display: block;
      height: 10px;
      background-color: transparent;
}

在上面的css中，我尝试添加一个按钮，该按钮的高度与我需要从顶部边距轨迹的高度相同，但由于某些原因，轨迹没有缩短，滚动条拇指没有完全上下移动。看起来上面的css并没有使轨迹变短，但是它缩短了拇指的路径

我也尝试过使按钮的背景不是透明的，而是滚动条容器背景的颜色，但是轨迹失去了我需要的边界半径

有没有关于如何实现这一目标的建议？提前感谢。

您可以使用滚动条样式的边框顶部和边框底部来获得边距效果

div的背景色和滚动条的边框色必须相同

div{ 背景：F4F6F9；/*您使用哪种颜色*/ 最大高度：300px； 溢出y：滚动； /*还有一些可选样式，例如div*/ 边框：3px实心424953； 填充：10px； 文本对齐：对齐； 宽度：50%； 保证金：自动 } *：-webkit滚动条{ 宽度：8px/*薄*/ } *：-webkit滚动条轨迹{ 背景：F4F6F9/*添加了div的背景色以使滚动条透明*/ } *：-webkit滚动条拇指{ 背景：4B89DA；/*您可以更改此设置*/ 高度：75px； 边框顶部：20px实心F4F6F9；/*空白顶部：20px |边框颜色与div的背景颜色相同*/ 边框底部：20px实心F4F6F9；/*空白底部：20px |边框颜色与div的背景颜色相同*/ } Lorem ipsum dolor sit amet，是一位杰出的献身者。猫科动物前驱体。这是一个很好的例子。莫比·康塞特图·安特·梅托斯。潜力悬钩子。不，不，不，不，不，不，不。在dui eget finibus的Nunc权杖。Donec odio leo，tristique vitae mi ac，faucibus rhoncus orci。Nam blandit lacus ac车载通讯器。毛里斯·亨德雷特·马萨·杜伊，欧盟自由主义者。车辆nisl中的脯氨酸。Nam nec molestie ipsum，一种不可侵犯的直径。Donec scelerisque，侵权者ultricies，lorem erat tristique velit，nec accumsan purus nisi sed nibh。在nibh Dignessim的Phasellus varius erat，eget maximus diam varius。西枕前叶。这是一个很好的例子。粗俗的权杖爱神的威严。国际猫科动物协会，ac viverra magna。他是一个伟大的人，他是一个伟大的人。在莫莱斯蒂的时间和地点。整数欧伊斯莫·洛雷姆·尼塞尔·乌尔里西斯·索达莱斯欧伊斯莫·奥古斯特。没有人坐在那里。Donec et velit convallis，imperdiet quam at，semper Elite。潜力悬钩子。在tellus eget dui和Equilla eu id sem中存在的非埃尼姆风险。三舌形舌苔，不含药用植物。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。整型eleifend mauris vel ipsum viverra sollicitudin。feugiat的pretium accumsan velit。在威尼斯，一位名叫amet sollicitudin ipsum consequat et.Cras malesuada varius fringilla的妇女坐在那里。Morbi tincidunt est nunc，一个有尊严的人，一个有效率的人。这句话的意思是：“我的朋友，我的朋友。”。在mollis sit amet，调味品id est，有一家餐厅。塞德·尤伊斯莫在托托·ac·比本杜姆。前庭拍卖人lorem quis feugiat mollis。无便利。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。潜力悬钩子。我坐在阿梅特·乌拉姆科珀·泰勒斯旁边。埃蒂亚姆·朗库斯（Etiam rhoncus）是一位不可救药的医生，他是一位临时医生。整型非前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。整型猫，一种时态连续的猫，一种位于密苏里州的猫。埃尼安坐在我的位子上。帕伦茨克是一个自由人。维瓦摩斯·波提托·埃罗斯·拉奥里特·朗卡斯（semper eros Laoret rhoncus）。前庭直径、位置、宽度和宽度。Lorem ipsum dolor sit amet，是一位杰出的献身者。发酵女贞子。花椰菜。埃尼安·阿利奎特·奥迪奥·非拉奥里特。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。Donec quis erat magna。南和多罗东部。请不要把毛里斯·韦勒·拉齐尼亚·福西布斯的手镯穿上。这是我的错，是我的错。佩伦茨克·尼斯尔·莫里斯、特里斯蒂克·因特杜姆·努拉·塞德、乌拉姆科珀·帕特·萨皮恩。权杖马克西姆斯。维瓦摩斯·奎斯·普鲁斯·康莫多（Vivamus quis purus commodo），调味品阿库（arcu-in），毛里斯元素（elementum mauris）。矢状背侧。努克乌尔特里斯酒店。耳颞前庭。梅塞纳斯e 不要诅咒我们。我们的爱是共同的，我们的爱是共同的。在佩伦茨克，马蒂斯·康塞特图。南乌尔特里斯马萨我乌尔纳弗林吉亚。不要使用非直径的euismod lorem elementum semper。这是一种调味品。佩伦茨克在爱神的位置。Phasellus ornare magna ut auctor ullamcorper。在拍卖人内克·安特（neque ante）的作品中，康格·尼西·比本杜姆（vel congue nisi bibendum）是一个权杖。在舌苔中，我是Pat metus viverra vel。马来苏阿达前庭，不必在老里特广场。扁豆叶甲。这是一种很好的方法。整数倍直径，蜗壳和效率为零，拍卖人的水平。造粒机扫描电镜扫描电镜（sem）扫描电镜（elementum quis lobortis vel）扫描电镜（elementum quis lobortis vel）扫描电镜（elementum quis lobortis vel）。多奈克·拉西尼亚·洛雷姆（Donec lacinia lorem a arcu pretium）是一家名为弗林利亚·图皮斯（fringilla turpis）的餐厅。南乌拉姆科珀品种turpis，和波苏尔厄洛斯rhoncus a。这是一种很简单的说法，它是一种很普通的说法。毛里斯·萨皮安·费利斯，比勒蒂姆·ac·利奥·塞德，阿利夸姆·拉齐尼亚·内克。这是一个很好的例子。Proin justo sem，Vignessim a酵母菌积累，nisl的车辆。策展人，无生命之母，奥奇·莫里斯·弗尼库姆·内克，我的名言是不可否认的。Duis id拍卖人libero。大鼠非小水平菱形肌。塞德·维利特·梅特斯，洛博蒂坐在埃米特·利奥·乌特，莫利斯·阿利奎特·泰勒斯。车辆叶丛中的ultricies lacinia ligula Maecenas。临时交通工具。Curabitur是一家欧洲大型酒店。努拉姆·斯克利斯·乌尔纳·内克·莫里斯·洛博蒂斯·亨德雷特。乌尔里西斯奥奇，乌尔里西斯乌尔里西斯特鲁斯乌拉姆科佩尔奎斯。前庭吊带床和托槽吊带床。埃尼安·西米，一只活老鼠，一只小舌。在奥古斯封建统治之前不存在，而在欧盟内部存在着精英。潜力悬钩子。

---

我已经尝试了它的所有功能，没有任何帮助，它是有效的，但是我的滚动条有背景色，当拇指没有一直往上移动时，它看起来很柔软。