html - 如何保证自定义滚动条？

Question

我试图在滚动条和 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 并没有使轨道变短，而是缩短了拇指的路径。

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

关于如何实现这一点有什么建议吗？提前致谢。

Answer 1

可以在滚动条样式中使用border-top和border-bottom来获得边距效果。

div 的background-color 和scrollbar 的border-color 必须相同。

div {
  background: #F4F6F9; /* which color you use */
  max-height: 300px;
  overflow-y: scroll;
  /* And some optional styles for example div */
  border: 3px solid #424953;
  padding: 10px;
  text-align: justify;
  width: 50%;
  margin: auto
}

*::-webkit-scrollbar {
  width: 8px /* thin */
}

*::-webkit-scrollbar-track {
  background: #F4F6F9 /* added div's background color to make scrollbar transparent */
}

*::-webkit-scrollbar-thumb {
  background: #4B89DA; /* you can change this */
  height: 75px;
  border-top: 20px solid #F4F6F9; /* hack for margin-top:20px | the border-color is same as div's background color */
  border-bottom: 20px solid #F4F6F9; /* hack for margin-bottom:20px | the border-color is same as div's background color */
}

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