webkit scroller bar custom vertical height

Question

I am creating a notification box, and for that, want to customize the vertical height of webkit scrollbar so that i can save space and use it for displaying other information, like, adding a close button.

On the center, i have a content(message) which i want to display. It will occupy the complete center area (height: 100%).

On the right, i have a close button on the top, and then a scrollbar for center content area (which is of a less height than its content area).

Is there any css way with the help of HTML, with which i can accomplish the desired result.

NOTE: No javascript and other libraries need to be included. Just pure CSS + HTML

Supported Browser: Only Chrome

I googled but i think there is no way(at least what i discovered..) available, until we use any kind of styling library.

***** COMMENT *****

@LGSon scrollbar thumb is still not completely visible in initial state. Adding screenshot for better understanding.

In 2nd screenshot, we are able to see full height of scrollbar thumb, not in 1st one.

Environment: Chrome Version 56.0.2924.87 (64-bit), macOS Sierra v10.12

Answer 1

You can't change the vertical scrollbar's height but you could do something like this, where one give the first scroll button the same height as the close button, where one give the thumb/tracker a margin-top, which then will size the thumb/tracker to fit perfectly in the space below.

Note, as pointed out by @Mohit Pandey, the "scroll button height" (first sample) solution seems not working properly on Mac, "margin-top" does (second sample)

Sample 1

.wrapper {
  position: relative;
  width: 200px;
  height: 70px;
  border: 1px solid black;
  overflow: hidden;
}

.scroller {
  height: 100%;
  overflow: auto;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  background: #B00;
  padding: 1px 3px;
  color: white;
  cursor: pointer;
}

.scroller::-webkit-scrollbar {
  width: 18px;
}

.scroller::-webkit-scrollbar-thumb {
  background: gray;
  height: 25px;
}

.scroller::-webkit-scrollbar-track-piece {
  background: lightgray;
}

.scroller::-webkit-scrollbar-button:start {
  height: 20px;
}

<div class="wrapper">
  <div class="close">X</div>
  <div class="scroller">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
  </div>
</div>

---

Sample 2

.wrapper {
  position: relative;
  width: 200px;
  height: 70px;
  border: 1px solid black;
  overflow: hidden;
}
.scroller {
  height: 100%;
  overflow: auto;
}
.close {
  position: absolute;
  right: 0;
  top: 0;
  background: #B00;
  padding: 1px 3px;
  color: white;
  cursor: pointer;
}

.scroller::-webkit-scrollbar {
  width: 18px;
}
.scroller::-webkit-scrollbar-thumb {
  background: gray;
  height: 28px;
  border-radius: 9px;
  margin-top: 20px;
}
.scroller::-webkit-scrollbar-track-piece {
  background: lightgray;
  border-radius: 9px;
  margin-top: 20px;
}

<div class="wrapper">
  <div class="close">X</div>
  <div class="scroller">
    Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
  </div>
</div>