Hide scroll bar on a popup element

Question

I have a popup element that has rounded corners with border-radius and a stylized scrollbar. My question is if there is a way to hide the overflow of the scrollbar so that when the user is at the top of the popup it won't be overflowing like in this

(white line is the scroll bar, red is the background and the popup is dark)

Answer 1

Add the margin-top and margin-bottom properties to your .box::-webkit-scrollbar-track. This way you reduce the available space of the scrollbar-track from top and bottom:

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

You can read more about all CSS scrollbar properties here and here.

---

Here's a working snippet:

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>