html - 将滚动条放置在元素内

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 div 中，它具有 padding 0 5px 0 0。技巧是增加 ex1 和包装元素之间的距离。您可以调整精确值。

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

支持

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

::-webkit-scrollbar is only available in WebKit-based browsers (e.g., Safari, all browsers on iOS, and others).

此外...

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

关键部分

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

<div class="ex0">
  <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>
</div>