logo标签列表

悬浮式圆形滚动条

htmlcssscrollbar
4
我有一个滚动条，宽度为7个像素，浮于容器内容之上，透明度调整，以便查看滚动条下的内容。重要的是，滚动条应该从容器的右边缘开始向左延伸7像素。请参见https://codesandbox.io/s/gallant-kapitsa-igb6p?file=/style.css 我希望滚动条拥有圆角边缘。具体来说，如果这是普通的div，我会设置20像素的边框半径。但问题在于，我使用border-right属性来实现悬停效果，这使得边角变圆变得棘手。我该如何解决这个问题？
4个回答
3

.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
@Infamous911 我更新了答案，这有点棘手，你需要操作滚动条轨道的宽度值，然后增加边框大小。找不到更有效的方法。 - Ash Archin
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>

这样做可以将滚动条与容器的右侧对齐，但我希望滚动条距离容器的右侧悬停7像素。 - Infamous911
我明白了。你在帖子中没有澄清，或者至少我没有理解。没有真正的方法来实现这一点，但有一个变通方法。请参见上面更新的答案。 - AMR
1

使用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）中显示的方式是这样的。 - Infamous911
这是因为分数的缘故。你需要调整圆的半径和位置。或者你可以使用 background-image 属性并将 SVG 图像设置为它。 - the Hutt
我已经更新了答案。Svg方法看起来更好。 - the Hutt
1

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并删除hover css。

如果您希望内容不重叠在滚动条上，则可以在list类中应用padding-right: 20px。

它显示如下图所示：

with padding right

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接