title: webkit scroller bar custom vertical height
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/yIWDc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yIWDc.png" alt="enter image description here"></a> </p>
  
  <p>On the center, i have a content(message) which i want to display. It will occupy the complete center area (height: 100%).</p>
  
  <p>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).</p>
  
  <p>Is there any css way with the help of HTML, with which i can accomplish the desired result.</p>
  
  <p><strong>NOTE:</strong> No javascript and other libraries need to be included. Just pure CSS + HTML</p>
  
  <p><strong>Supported Browser:</strong> Only Chrome  </p>
  
  <p>I googled but i think there is no way(at least what i discovered..) available, until we use any kind of styling library. </p>
  
  <p>***** <strong><em>COMMENT</em></strong> *****</p>
  
  <p><strong>@LGSon</strong>
  scrollbar thumb is still not completely visible in initial state. Adding screenshot for better understanding.</p>
  
  <p><a href="https://i.stack.imgur.com/UjOvQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UjOvQ.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/7WgfK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7WgfK.png" alt="enter image description here"></a></p>
  
  <p>In 2nd screenshot, we are able to see full height of scrollbar thumb, not in 1st one.</p>
  
  <p><strong>Environment:</strong> Chrome Version 56.0.2924.87 (64-bit), macOS Sierra v10.12</p>