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

【问题标题】：Rounded scrollbar that hovers over content悬停在内容上的圆形滚动条
【发布时间】：2021-12-25 05:16:53
【问题描述】：

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

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

【问题讨论】：

标签： html css scrollbar

【解决方案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>

【讨论】：

这样做会使滚动条与容器的右侧对齐，但我希望滚动条悬停在距离容器右侧 7px 处。
我明白了。你没有在你的帖子中澄清这一点，或者至少我没有明白。没有真正的方法可以实现这一点，但有一种解决方法。请参阅上面的更新答案。

【解决方案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>

【讨论】：

不错的解决方案。唯一的问题是您使滚动条更靠近容器的右侧。如果您可以使滚动条距右侧 7 像素，我会将其设为可接受的答案
@Infamous911 我更新了答案，这有点棘手，您需要操纵滚动条轨道的宽度值，然后增加边框大小。找不到更有效的方法。

【解决方案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>

【讨论】：

这使得栏的顶部有一条奇怪的线......至少它在我的浏览器上显示的方式（最新的 chrome）
这是因为分数。你将不得不修补圆半径和位置。或者您可以使用background-image 属性并将svg 图像设置为它。
我已经更新了答案。 Svg 方法看起来更好。

【解决方案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

如果您希望内容不与滚动条重叠，您可以在列表类中应用padding-right: 20px

显示此类型参考下图

【讨论】：