将滚动条放置在元素内

Question

我正在尝试自定义滚动条，使其包含在元素中，即不应占用其自身的空间。

以下是我尝试的代码：

div.ex1 {
  /* background-color: lightblue; */
  width: 110px;
  height: 110px;
  overflow: scroll;
}

 ::-webkit-scrollbar {
  width: 14px;
  height: 18px;
}

 ::-webkit-scrollbar-thumb {
  height: 60px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  -webkit-border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

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

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

<div class="ex1">
  <div style="width: 100%; height: 30px; background: red">

  </div>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

这是jsfiddle链接。

我该如何实现？

Answer 1

下面我放置了我将要使用的方法。我将ex1 div包裹在具有ex0的{​​{1}} div中。技巧是增加padding 0 5px 0 0与包装元素之间的距离。您可以调整精确值。

我的解决方案在下面，但首先要解决...

支持

请记住，::-webkit-scrollbar selectors are supported only by webkit-based browsers。

  

::-webkit-scrollbar仅在基于WebKit的浏览器（例如Safari，iOS上的所有浏览器以及其他浏览器）中可用。

Morover ...

  

此功能不是标准功能，也不在标准轨道上。请勿在面向Web的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且将来的行为可能会发生变化。

关键部分

ex1

摘要

div.ex0 {
  width: 110px;
  height: 110px;
  border: 1px solid black;
  padding: 0 5px 0 0;
}

div.ex1 {
  /* background-color: lightblue; */
  overflow-y: scroll;
  overflow-x: hidden;
  height: 110px;
  padding: 0 5px 0 0;
}

div.ex0 {
  width: 110px;
  height: 110px;
  border: 1px solid black;
  padding: 0 5px 0 0;
}

div.ex1 {
  /* background-color: lightblue; */
  overflow-y: scroll;
  overflow-x: hidden;
  height: 110px;
  padding: 0 5px 0 0;
}

::-webkit-scrollbar {
  width: 14px;
  height: 18px;
}

::-webkit-scrollbar-thumb {
  height: 60px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  -webkit-border-radius: 7px;
  background-color: rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

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

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