JSFiddle - React, Tailwind, and code Playground

by Dmitry Luzanov

HTML

<section class="hidescroll">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati repudiandae eaque omnis sapiente dolores odit? Ipsam nobis nihil, maxime modi laboriosam temporibus illum dolores rerum explicabo accusantium a error at architecto quisquam numquam tempora officiis blanditiis, consectetur, ducimus praesentium suscipit beatae! Inventore repellendus maiores voluptate perferendis harum adipisci illum quos eos, reiciendis eligendi aut, omnis debitis earum obcaecati magnam fugit. Saepe quia nisi ullam eos possimus ipsa voluptatum quasi nam dolor at. Sequi doloribus atque, iure. Doloremque quas tenetur, ratione officia id doloribus excepturi, culpa et at soluta vitae, corporis nulla non sequi ipsum, hic sunt accusamus facilis deserunt inventore repudiandae tempore quo suscipit nobis. Blanditiis id facilis vel excepturi illo sequi voluptas quo. Commodi eveniet excepturi nesciunt esse animi, suscipit, repudiandae, repellendus ipsum voluptatem dolores tempore architecto eaque odit officiis earum nam nisi totam aperiam, mollitia. Expedita laborum ipsam reprehenderit non, numquam exercitationem quidem commodi. Perspiciatis laudantium explicabo, aspernatur qui facere blanditiis voluptates. Ab eius velit quo. Obcaecati accusamus libero maxime voluptatum culpa blanditiis est perferendis enim, nisi debitis tenetur nemo inventore. Ex officiis corrupti, consectetur a, eaque provident officia nihil recusandae alias culpa assumenda voluptates, ad illum totam quod cupiditate molestias fugiat amet, expedita nulla! Similique culpa, reprehenderit et. Corporis dolores incidunt libero iste qui quam. Optio minus et magni laborum vel ducimus ab, nesciunt explicabo eveniet velit placeat repellat laboriosam distinctio provident mollitia unde in, repudiandae quam rem fugiat, sapiente vitae necessitatibus. Nam ab adipisci doloribus pariatur, quod eligendi fugiat delectus et est sed sint dolor aperiam obcaecati animi illo atque quae illum...

CSS

::-webkit-scrollbar-button { 
background-image:url(''); 
background-repeat:no-repeat; 
width:6px; 
height:0px 
} 

::-webkit-scrollbar-track { 
background-color: transparent; 
box-shadow:0px 0px 0px #000 inset; 
} 

::-webkit-scrollbar-thumb { 
-webkit-border-radius: 5px; 
border-radius: 0px; 
background-color:#28a7f0; 
background-image:url('https://yraaa.ru/_pu/24/59610063.png'); 
background-position:center; 
background-repeat:no-repeat; 
} 

::-webkit-resizer{ 
background-image:url(''); 
background-repeat:no-repeat; 
width:7px; 
height:0px 
} 

::-webkit-scrollbar{ 
width: 9px; 
}

.hidescroll {
  overflow: hidden;
  max-height: 300px;
  position: relative;
  width: 500px;
}

.content {
  overflow: auto;
  max-height: inherit;
  padding-right: 15px;
  position: relative;
}