Html 隐藏弹出元素上的滚动条

发布于10月25日

我有一个弹出式元素，有border-radius个圆角和一个风格化的滚动条.我的问题是，是否有一种方法可以隐藏滚动条的溢出，这样当用户位于弹出窗口的顶部时，它就不会像这样溢出

(白线为滚动条，红色为背景，弹出为深色)

推荐答案

将margin-top和margin-bottom属性添加到.box::-webkit-scrollbar-track.这样，您可以从上到下减少滚动条轨迹的可用空间:

.box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0);
    margin-top: 15px;
    margin-bottom: 15px;
}

您可以阅读有关所有css滚动条属性here和here的更多信息.

以下是一个工作片段:

body {
  background-color: rgb(207, 35, 35);
  color: white;
  overflow: hidden;
}

.box-parent {
  margin: 50px;
}

.box {
  border-radius: 25px;
  height: 550px;
  padding: 20px;
  background: rgb(32, 32, 32);
  overflow: scroll;
  overflow-x: hidden;
}

.box::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.box::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 5px;
}

.box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
  margin-top: 15px;
  margin-bottom: 15px;
}

<div class="box-parent">
  <div class="box">
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
    <br> text
  </div>
</div>