html - webkit滚动条自定义垂直高度

Question

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

在中心，我有一个要显示的内容(消息)。它将占据整个中心区域(高度:100%)。

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

是否有任何在 HTML 帮助下的 css 方式，我可以通过它来实现所需的结果。

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

支持的浏览器:仅限 Chrome

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

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

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

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

环境:Chrome 版本 56.0.2924.87(64 位)、macOS Sierra v10.12

Answer 1

您无法更改垂直滚动条的高度，但您可以执行类似的操作，其中给第一个滚动按钮与关闭按钮相同的高度，其中给拇指/跟踪器一个margin-top，然后将调整拇指/跟踪器的大小以完美适合下面的空间。

请注意，正如 @Mohit Pandey 所指出的，“滚动按钮高度”(第一个示例)解决方案似乎 not working properly on Mac ，“margin-top”确实(第二个示例)

示例 1

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

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

---

示例 2

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

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