Question

我正在尝试自定义滚动条。为了从我自己的滚动条开始，我将当前滚动条的width设置为0，但是到我将100%的高度设置为div时，我希望它像滚动条一样工作，.content中的文本消失了，我对此问题依旧。

以下是我到目前为止尝试过的代码。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: #fff;
}

.container {
  width: 20%;
  height: 100%;
  background: #CD5C5C;
}

.content {
  text-align: center;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}

.content::-webkit-scrollbar {
  width: 0;
}

.scrollbar {
  position: relative;
  width: 20px;
  height: 100%;
  background: #2F4F4F;
}

<div class="container">
  <div class="content">
    <div class="scrollbar">
      <div class="scrollball"></div>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

我在做什么错了？

Answer 1

滚动条将内容推开，因为它们显示为：block;

两个显示：块；除非提供float样式，否则元素将不会共享同一行。

使用绝对定位的元素或使您的html结构不同以解决此问题。我建议使用两个顶级元素，一个包含您的内容，另一个包含您的滚动条。使用float或其他display样式（例如flex）进行修复。

为什么在尝试自定义滚动条时内容消失了？

1 个答案: