How to make scrollbar length less than parent block?

Question

I need to make scrollbar that will be shorter than its parent block. It will be perfect if it will CSS-only! How can I do that?

img that shows exactly what I need

Handball

Answer 1

In posterity, if someone else drops in on this in 2020 or beyond and wants some ideas, try ::-webkit-scrollbar elements. They are described in detail by CSS Tricks, though it makes for some technical reading. The part you'll need to accomplish the above trick is ::-webkit-scrollbar-button:end:increment. If you want that to align on the bottom, you'll use ::-webkit-scrollbar-button:start:decrement. If you're working with horizontal bars, you'll use width instead of height.

I haven't yet figured out how to do this on non-webkit browsers outside of using a JS scrollbar library. If you want to standardize things, I'd recommend one of those. Some examples du jour include:

1. simplebar
2. simple-scrollbar

.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>

Oilla

OH MY GOSH I was looking to see if this was actually possible!! I'm looking to create an image editor with feature similar to Adobe Illustrator/Photoshop, and I wanted to add some stats in line with the scrollbars. This is perfect! – Tanjatanjore

Glad to be of service! (: – Oilla

This is excellent, i was able to reduce the size of my scrollbar, you are a savior! – Tannatannage

Thank you!, if anyone wants to adjust the height of scrollbar, just fiddle the height property of the .scroller::-webkit-scrollbar-button:end:increment, for me whats works is 150px instead of % base – Abott

Answer 2

finally, you helped us to find a way to shorten the length of a scroll bar. thanks, bro If anyone wants the scroll bar to be placed at the center of the div vertically. Try this-->

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

.big-thing {
  height: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scroller::-webkit-scrollbar {
  width: 7px;
}
.scroller::-webkit-scrollbar-track-piece {
  background: rgb(216, 216, 216);
  border-radius: 10px;
}
.scroller::-webkit-scrollbar-thumb {
  background: rgb(81, 37, 64);
  border-radius: 10px;
}
.scroller::-webkit-scrollbar-button:end:decrement {
  height: 25%;
  display: block;
  background: transparent;

}
.scroller::-webkit-scrollbar-button:start:increment {
  height: 25%;
  display: block;
  background: transparent;

}
.item{
  width: 100px;
  height: 100px;
  background-color: red;
}

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

Preparatory

Answer 3

You can use overflow:auto in child class, Below is simple example.

check tricks to customize the scrollbar

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

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

Unaunabated