Question

我需要制作比其父块短的滚动条。如果只有CSS，那将是完美的！我怎么能这样做？

Answer 1

在后代中，如果其他人在2020年或以后涉足此事并想要一些想法，请尝试使用::-webkit-scrollbar元素。 CSS Tricks对它们进行了详细描述，尽管它需要一些技术知识。完成上述技巧所需的部分是::-webkit-scrollbar-button:end:increment。如果要使其在底部对齐，请使用::-webkit-scrollbar-button:start:decrement。如果您正在使用单杠，则将使用width而不是height。

除了使用JS滚动条库之外，我还没有想出如何在非Webkit浏览器上执行此操作。如果您想使事情标准化，我将推荐其中一种。 du jour 的一些示例包括：

.scroller {
  height: 200px;
  width: 400px;
  overflow: auto;
  background: grey;
}

.big-thing {
  height: 800px;
  width: 100%;
}

.scroller::-webkit-scrollbar {
  width: 10px;
}
.scroller::-webkit-scrollbar-track-piece {
  background: white;
  border: solid 1px black;
}
.scroller::-webkit-scrollbar-thumb {
  background: black;
}
.scroller::-webkit-scrollbar-button:end:increment {
  height: 50%;
  display: block;
  background: transparent;
}

<div class="scroller">
  <div class="big-thing"></div>
</div>

Answer 2

您可以在子类中使用overflow:auto，下面是一个简单的示例。

选中tricks以自定义滚动条

＆＃13;

.parent {
  height:100px;
  border:1px solid #000000;
  }
.child {
  height:50%;
  overflow-y: scroll;
  width:50%;
  }

＆＃13;

<div class="parent">
  <div class="child">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
  </div>
</div>

＆＃13;

如何使滚动条长度小于父块？

2 个答案: