JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="scrollable">
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
<p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
<p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
<p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
<p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
<p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
<p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>    
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords and shot each other</p>
    <p>one fine day in the middle of the night two dead men got up to fight, back to back they faced each other, drew their swords...

CSS

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

/*
scrollbar
scrollbar-button
scrollbar-track
scrollbar-track-piece
scrollbar-thumb
scrollbar-corner
resizer
*/

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

::-webkit-scrollbar-button {
    background-color: red;
}

::-webkit-scrollbar-thumb {
    background-color: yellow;
    border: 3px solid blue;
    
}

::-webkit-scrollbar-track {
    border: 3px solid green;
    background-color: blue;
}

JavaScript

/**
    custom webkit scrollbars
*/

$(".scrollable").css("overflow", "hidden"); 

$(".scrollable").mouseleave(function () {
   $(this).css("overflow", "hidden"); 
});

$(".scrollable").mouseenter(function () {
   $(this).css("overflow", "auto"); 
});