JSFiddle - React, Tailwind, and code Playground
by robx
HTML
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js"></script>
<div id="dummy">
In vulpes aliquip ad inhibeo facilisi ludus bene. Fere dolor, utrum singularis eros os euismod magna appellatio pecus comis inhibeo wisi antehabeo facilisis. Praesent vel, abdo, huic consequat mauris facilisis probo lucidus quod verto distineo paratus venio. Jugis praemitto scisco ullamcorper, ex patria, illum ventosus ullamcorper quadrum.
Gilvus eligo nostrud, ingenium aliquip velit neo. Refero hos, brevitas nulla, euismod augue exputo inhibeo. Premo dignissim turpis quidne consequat praesent, et nunc, lenis. Magna volutpat dignissim comis in transverbero, gilvus transverbero lobortis, praesent vereor tation decet iustum probo. Duis vel eligo duis indoles molior in illum secundum. Meus facilisis validus tamen, illum sino, consequat odio.
Suscipit vero pecus cogo hos comis. Venio humo loquor haero quis, obruo dignissim dolus aliquam, haero tation facilisi fatua fere. Metuo, brevitas comis metuo incassum adipiscing mos ad nullus populus utinam. Ullamcorper natu ingenium rusticus humo, te. Camur qui patria gilvus similis vulputate, quibus et cogo.
</div>
<div id="smallDummy">
just a line here
</div>
<div id="wrapper">
<div id="oflow"></div>
</div>
<a href="" id="large">get large content</a> | <a href="" id="small">get small content</a> | <a href="" id="destroyMe">Destroy</a>
CSS
#wrapper{
border:1px solid #000;
height:100px;
width:100px;
overflow:auto;
}
#dummy, #smallDummy{
display:none;
}
JavaScript
$("#large").click(function() {
$("#oflow").html($("#dummy").text());
$("#wrapper").jScrollPane();
return false;
});
$("#small").click(function() {
$("#oflow").html($("#smallDummy").text());
$("#wrapper").jScrollPane();
return false;
})