css - 如何设置滚动条的边距

Question

我有一个带圆 Angular 的 div。它需要是可滚动的。我添加了滚动条，但滚动条控件的 Angular 在 div 的圆 Angular 处越界了。有没有办法设置滚动条控件的边距？我在考虑顶部 10-15 像素和底部 10-15 像素。

这是我的 div 样式:

div.consoleDiv {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 400px;
    padding: 10px;
    margin: -200px 0 0 -300px;
    border: 2px solid #000;
    border-radius: 15px;
    -moz-border-radius: 15px;
    background-color: black;
    border-color: slategrey;

    scrollbar-arrow-color: black;
    scrollbar-3dlight-color: black;
    scrollbar-track-color: black;
    scrollbar-face-color: black;
    scrollbar-shadow-color: lightgray;
    scrollbar-base-color: lime;
    overflow-y: auto;
}

我找到了一些解决方案，但到目前为止它们对我的滚动条的影响为零。我试过那些:

    ::-webkit-scrollbar {
    width: 14px;
    height: 18px;
}
::-webkit-scrollbar-thumb {
    height: 6px;
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    -webkit-border-radius: 7px;
    background-color: rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
::-webkit-scrollbar-corner {
    background-color: transparent;
}

Answer 1

您可以应用一个技巧，为您的滚动条添加边框半径，它会像没有溢出其容器一样适合...您需要设置 custom styles为你的卷轴..

div.consoleDiv {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 300px;
    height: 200px;
    padding: 10px;
    border: 2px solid #000;
    border-radius: 15px;
    -moz-border-radius: 15px;
    background-color: black;
    border-color: slategrey;
    color:white;
    overflow:scroll;
   

    scrollbar-arrow-color: black;
    scrollbar-3dlight-color: black;
    scrollbar-track-color: black;
    scrollbar-face-color: black;
    scrollbar-shadow-color: lightgray;
    scrollbar-base-color: lime;
    overflow: auto;
}

div.consoleDiv::-webkit-scrollbar {
   /* width: 14px;
    height: 18px;*/
    width:10px;
    background:red;
    margin-right:10px;
   border-top-right-radius:15px;
   border-bottom-right-radius:15px;
}
div.consoleDiv::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
  border-top-right-radius:15px;
   border-bottom-right-radius:15px;
}

<div class="consoleDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a tempor ligula, sed cursus lorem. Sed in urna id neque tincidunt viverra quis in enim. In ullamcorper eros nec dapibus sagittis. Praesent elementum orci dolor, ac blandit mauris placerat vitae. Duis finibus, nisi at imperdiet eleifend, lorem lacus rhoncus erat, eu dignissim elit ipsum at eros. Duis vehicula volutpat urna, vel ullamcorper neque fringilla ut. Fusce pellentesque faucibus egestas. Aenean non vulputate risus, vitae viverra metus. Praesent sit amet ligula nulla. Integer vel ex nibh. Duis placerat et urna eu imperdiet.

Fusce eget molestie lectus. Curabitur condimentum urna eget quam porta vestibulum. Integer elementum, sem vel aliquam feugiat, sem urna elementum augue, sed scelerisque est ligula eu sem. Aliquam et tellus eros. Cras egestas eleifend risus. Sed sit amet erat euismod, molestie felis quis, semper metus. Integer id dignissim nunc. Phasellus lacinia lectus et ex interdum bibendum. Maecenas convallis non nisi sit amet facilisis. In sit amet neque dapibus, pellentesque justo at, vehicula eros. Fusce mattis sollicitudin fermentum. Fusce justo ligula, malesuada quis est vel, ultrices posuere sem. Ut blandit elementum luctus.

Ut finibus arcu felis, quis semper dolor elementum quis. Suspendisse molestie ultricies ex eu bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec pulvinar semper viverra. Integer sit amet efficitur nibh. In egestas vel sapien sed volutpat. Nunc lorem neque, feugiat id eros in, dapibus ultricies ipsum. Curabitur eget lectus elit.

Cras orci turpis, finibus sit amet varius et, molestie nec velit. Nam mauris nisl, faucibus vitae aliquam id, vehicula id lorem. Nam feugiat id enim in sagittis. Mauris at turpis enim. Sed non ligula id nisi pellentesque blandit ut eget purus. Nam ut orci vitae orci dictum lobortis. Sed posuere ultrices posuere. Ut sodales est id elit laoreet commodo. Quisque viverra fermentum neque, quis congue nibh tristique eu. Curabitur cursus risus in scelerisque rhoncus. Nullam odio augue, lacinia nec interdum id, eleifend ut erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam tempor ut odio sit amet vulputate. Ut rhoncus cursus lectus, in laoreet diam dictum at. Nullam ut gravida lorem, a congue felis. In et arcu ultricies nulla laoreet convallis at vel odio.

Mauris ex lacus, mattis eu ipsum eu, semper pharetra purus. Vestibulum imperdiet rutrum lorem a bibendum. Curabitur ornare in est ac vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vitae bibendum libero, sed malesuada libero. Sed et urna quis justo imperdiet condimentum nec id purus. In placerat mi nibh, elementum finibus magna ullamcorper in. Vivamus nulla metus, condimentum non finibus sed, semper ac metus. Nunc accumsan nibh elit, sed fringilla risus lobortis ac.
</div>