JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<div class="two">
    <p>Western cultures use sweet and sour sauce in two different
    ways. Dishes can either include the sauce as an ingredient in
    cooking or use the sauce as a pour-over or dipping sauce for
    the meal.</p>
    <p>Chinese restaurants in Western countries commonly serve
    chicken, pork, or shrimp that has been battered and deep-fried,
    then served with a sweet and sour sauce poured over the meat.
    It is also common to find the sweet and sour sauce cooked with
    sliced green peppers, onions and pineapple before it is poured
    over the meat.</p>
    <p>Common in Western sweet and sour sauce is the addition of
    fruits such as pineapple and vegetables such as sweet pepper
    and green onions. Traditional rice vinegar is becoming more
    readily available due to the increase in Asian food stores but
    a mixture of vinegar and dry sherry is often still used in
    sweet and sour dishes. Also common is the use of corn starch as
    thickener for the sauce and tomato ketchup to give a stronger
    red colour to the dish and to add a Western taste. Most
    supermarkets across Europe and America carry a range of
    prepared sweet and sour sauces either for adding to a stir-fry
    or for use as a dipping sauce.</p>
</div>
    <p>Common in Western sweet and sour sauce is the addition of
    fruits such as pineapple and vegetables such as sweet pepper
    and green onions. Traditional rice vinegar is becoming more
    readily available due to the increase in Asian food stores but
    a mixture of vinegar and dry sherry is often still used in
    sweet and sour dishes. Also common is the use of corn starch as
    thickener for the sauce and tomato ketchup to give a stronger
    red colour to the dish and to add a Western taste. Most
    supermarkets across...

CSS

div.two {
	margin:20px;
	width:300px;
	height:300px;
	border-radius:150px;
    overflow-y:scroll;
	background:url('https://s3.amazonaws.com/giphymedia/media/v0YiARQxj1yc8/giphy.gif') top center no-repeat;
	box-shadow:inset 0 0 20px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,.6);
    float:right;
    -webkit-shape-outside:circle(150px at 50% 50%) border-box;
	shape-outside:circle(150px at 50% 50%) border-box;
	-webkit-shape-margin:20px;
	shape-margin:20px;
    }

div.one {
    
    }


.scrollbar-external_wrapper {
    height: 300px !important;
    position: relative;
    width: 300px !important;
}
.scrollbar-external {
	margin:20px;
	width:300px;
	height:300px;
	border-radius:150px;
    overflow-y:scroll;
	background:url('http://media.giphy.com/media/MpceqYw3yRC9y/giphy.gif') top center no-repeat;
	box-shadow:inset 0 0 20px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,.6);
    -webkit-shape-outside:circle(150px at 50% 50%) border-box;
	shape-outside:circle(150px at 50% 50%) border-box;
	-webkit-shape-margin:20px;
	shape-margin:20px;
}

.external-scroll_x,
.external-scroll_y {
    border: solid 1px #000;
    border-radius:8px;
    cursor: pointer;
    display: none;
    position: absolute;
}
 
 
.external-scroll_y.scroll-scrolly_visible {
    display: block;
    height: 280px;
    left: 340px;
    top:10px;
    width: 14px;
    box-shadow:3px 3px 6px rgba(0,0,0,.5);
}
 
.external-scroll_x div,
.external-scroll_y div
{
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
}
 
.external-scroll_x .scroll-bar,
.external-scroll_y .scroll-bar {
    background: #ccc;
    box-shadow:0 0 6px #000;
    border-radius:8px;
    z-index: 12;
}
 
.external-scroll_x .scroll-bar {
    width: 100px;
}
.external-scroll_y .scroll-bar {
    height: 100px;
}

JavaScript

jQuery(function($){
    $('div.two').scrollbar();

    jQuery('.scrollbar-external').scrollbar({
        "autoScrollSize": false,
        "scrolly": $('.external-scroll_y')
    });
});