JSFiddle - React, Tailwind, and code Playground

by Harm Zeinstra

HTML

<div id="outer">

<div...

CSS

#test{
  max-height:400px;
  overflow-x:none;
  overflow-y:scroll;
  padding-right:10px;
}

::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

JavaScript

$('#test').click(function(){
	 // $('body').css('padding-right', '-50px'); 
});