JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<div id="dvContent">lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...
    <br />lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...
    <br />lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...lorem ipsum...</div>

CSS

#dvContent {
    width:110px;
    height:200px;
    overflow:hidden;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;    /* for vertical scrollbars */
    height: 8px;    /* for horizontal scrollbars */
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius:4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    border-radius:4px;
}

JavaScript

$('#dvContent').hover(function () {
    $('#dvContent').css({
        "overflow-y": "scroll"
    });
}, function () {
    $('#dvContent').css({
        "overflow-y": "hidden"
    });
});