webkit滚动条自定义垂直高度

Question

我正在创建一个通知框，为此，我想自定义webkit滚动条的垂直高度，这样我就可以节省空间并用它来显示其他信息，比如添加一个关闭按钮。

在中心，我有一个我想要显示的内容（消息）。它将占据整个中心区域（高度：100％）。

在右侧，我的顶部有一个关闭按钮，然后是中心内容区域的滚动条（高度低于其内容区域）。

在HTML的帮助下是否有任何css方式，我可以用它来完成所需的结果。

注意：不需要包含javascript和其他库。只是纯CSS + HTML

支持的浏览器：仅限Chrome

我用谷歌搜索但我认为没有办法（至少我发现了......）可用，直到我们使用任何类型的样式库。

***** 评论 *****

@LGSon 滚动条拇指在初始状态下仍然不完全可见。添加屏幕截图以便更好地理解。

在第二个屏幕截图中，我们可以看到滚动条拇指的完整高度，而不是第一个。

环境：Chrome版本56.0.2924.87（64位），macOS Sierra v10.12

Answer 1

您无法更改垂直滚动条的高度，但您可以执行以下操作：，其中第一个滚动按钮与关闭按钮的高度相同，其中一个给拇指/跟踪器一个边缘顶部，然后将拇指/跟踪器的大小完全适合下面的空间。

注意，正如@Mohit Pandey指出的那样，＆＃34;滚动按钮高度＆＃34; （第一个样本）解决方案似乎not working properly on Mac，＆＃34; margin-top＆＃34;做（第二个样本）

样本1

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  width: 200px;
  height: 70px;
  border: 1px solid black;
  overflow: hidden;
}

.scroller {
  height: 100%;
  overflow: auto;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  background: #B00;
  padding: 1px 3px;
  color: white;
  cursor: pointer;
}

.scroller::-webkit-scrollbar {
  width: 18px;
}

.scroller::-webkit-scrollbar-thumb {
  background: gray;
  height: 25px;
}

.scroller::-webkit-scrollbar-track-piece {
  background: lightgray;
}

.scroller::-webkit-scrollbar-button:start {
  height: 20px;
}

＆＃13;

<div class="wrapper">
  <div class="close">X</div>
  <div class="scroller">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

样本2

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  width: 200px;
  height: 70px;
  border: 1px solid black;
  overflow: hidden;
}
.scroller {
  height: 100%;
  overflow: auto;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  background: #B00;
  padding: 1px 3px;
  color: white;
  cursor: pointer;
}

.scroller::-webkit-scrollbar {
  width: 18px;
}
.scroller::-webkit-scrollbar-thumb {
  background: gray;
  height: 28px;
  border-radius: 9px;
  margin-top: 20px;
}
.scroller::-webkit-scrollbar-track-piece {
  background: lightgray;
  border-radius: 9px;
  margin-top: 20px;
}

＆＃13;

<div class="wrapper">
  <div class="close">X</div>
  <div class="scroller">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;