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

Question

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

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

Answer 1

在您的示例中，您已经修改了滚动条，因此任何 CSS 都将仅适用于滚动条。

所以在 .list::-webkit-scrollbar-thumb 块中，我将替换

border-right: 7px solid transparent;

与

border-radius: 7px;

如果你想让它更苗条，在.list::-webkit-scrollbar块中，只需将宽度更改为7px;

编辑：

所以你想要在边框和滚动条之间留一个空隙。没有真正实用的方法可以做到这一点；浏览器会总是将滚动条推到屏幕边缘。它的可用性更好。但要达到您想要的效果，您可以使用某种伪元素来实现。将您的列表包装在一个容器中，并给容器一个填充。这将使您的滚动条看起来像是在远离边缘“悬停”。

参见下面的示例：

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

.pseudogap {
  padding-right: 10px;
  max-width: 210px;
  border: 1px solid black;
}

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

.list::-webkit-scrollbar-thumb {
  height: 73px;
  /* border-right: 7px solid transparent; */
  border-radius: 7px;
  background-clip: padding-box;
  background-color: rgba(0, 0, 0, 0.25);
}

.list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

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

<div class="pseudogap">
  <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>
</div>

Answer 2

.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>

Answer 3

使用 svg 作为背景：

.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: 14px;
}

.list::-webkit-scrollbar-thumb {
  height: 73px;
  background-clip: padding-box;
  border-right: 7px solid transparent;
  background: 0 0 / 100% 100% no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='100%'><rect fill='rgb(0,0,0)' fill-opacity='0.2' x='0' y='0' rx='7px' ry='7px' width='100%' height='100%'/></svg>");
}

.list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.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 is pretty long so it goes under</li>
  <li>item 7</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>

<p>Svg used in the background: </p>
<svg xmlns='http://www.w3.org/2000/svg' width='7' height='100%'> 
      <rect fill='rgb(0,0,0)' fill-opacity='0.4' x='0' y='0' rx='7px' ry='7px' width='100%' height='100%'/> 
    </svg>

其他方法可能是使用渐变。使用您当前的设置，滚动条宽度 14px，您可以使用它来设置 background 属性:

.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: 14px;
  padding-right: 7px;
}

.list::-webkit-scrollbar-thumb {
  height: 73px;
  background-clip: padding-box;
   background: radial-gradient(circle 4.6px at bottom center, #0004 0 75%,transparent 0 75%) 0 0 / 7px 3.6px no-repeat,
         radial-gradient(circle 4.6px at top center, #0004 0 75%,transparent 0 75%) -3.5px 100% / 100% 3.5px no-repeat,
         linear-gradient(90deg, #0004 0 7px, transparent 7px 100%) 0px 3.5px / 50% calc(100% - 7px) no-repeat ;

}

.list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.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 is pretty long so it goes under</li>
  <li>item 7</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>

Answer 4

body {
   margin: 0;
   padding: 0;
} 
.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: 0;
   border-radius: 20px;
   background-color: rgba(255,255,255,.2);
}
.list::-webkit-scrollbar-track {
   border-radius: 20px;
   background-color: rgba(255,255,255,.2);
   border: 7px solid transparent;
   background-clip: content-box;
   margin: 7px 0;
}
.list::-webkit-scrollbar-thumb {
   border-radius: 20px;
   background-color: rgba(0, 0, 0, 0.25);
   border: 7px solid transparent;
   background-clip: content-box;
}

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

<body>
    <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>
  </body>

此处悬停时可见滚动条如果你想默认你可以设置 :-webkit-scrollbar 宽度 0 到 20px 并删除悬停 css

如果您希望内容在滚动条上不重叠，您可以在列表 class

中应用 padding-right: 20px

显示此类型参考下图

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

Rounded scrollbar that hovers over content

html

css

scrollbar