html - 悬停在内容上的圆形滚动条

Question

我有一个宽度为 7px 的滚动条，它悬停在不透明的容器内容上，以便可以在滚动条下看到内容。滚动条应该出现在距离容器右侧 7px 处，这很重要。见https://codesandbox.io/s/gallant-kapitsa-igb6p?file=/style.css

我希望滚动条具有圆形边缘。具体来说，如果它是一个常规的 div，我会设置一个 20px 的边界半径。但问题是我正在使用该border-right属性来实现悬停效果，这使得圆边变得棘手。我怎样才能做到这一点？

标签： htmlcssscrollbar

Answer 1

.list {
  position: relative;
  display: flex;
  max-height: 200px;
  max-width: 200px;
  flex-direction: column;
  overflow-y: overlay;
  border: 1px solid black;
}

.list::-webkit-scrollbar {
  width: 22px;
}

.list::-webkit-scrollbar-track {
  width: 20px;
}

.list::-webkit-scrollbar-thumb {
  height: 73px;
  width: 24px;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  border: 8px solid rgba(0, 0, 0, 0);
}

.list::-webkit-scrollbar-corner {
  background-color: transparent;
}


.list::-webkit-scrollbar-corner {
  background-color: transparent;
}

<ul class="list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7 is pretty long so it goes under</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
  </ul>