JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<table border="1">
<thead>Header</thead>
<tbody id="scrollMe">
<tr>
<td>
<div id="scroll">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br> 1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
</div>
</td>
</tr>
</tbody>
</div>
CSS
#scroll{
background:pink;
font-size:20px;
}
table{
height: 100%;
}
JavaScript
$(document).ready(function(){
$('#scroll').slimScroll({
//height: '100px',
width: '80px'
});
});
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Version: 0.5.0
*
*/
(function($) {
jQuery.fn.extend({
slimScroll: function(options) {
var defaults = {
wheelStep : 20,
width : 'auto',
height : '100%',
size : '7px',
color: '#000',
position : 'right',
distance : '1px',
start : 'top',
opacity : .4,
alwaysVisible : false,
railVisible : false,
railColor : '#333',
railOpacity : '0.2',
railClass : 'slimScrollRail',
barClass : 'slimScrollBar',
wrapperClass : 'slimScrollDiv',
allowPageScroll: false,
scroll: 0
};
var o = ops = $.extend( defaults , options );
// do it for every element that matches selector
this.each(function(){
var isOverPanel, isOverBar, isDragg, queueHide, barHeight, percentScroll,
divS = '<div></div>',
minBarHeight = 30,
releaseScroll = false,
wheelStep = parseInt(o.wheelStep),
cwidth = o.width,
cheight = o.height,
size = o.size,
color = o.color,
position = o.position,
distance = o.distance,
start = o.start,
opacity = o.opacity,
alwaysVisible = o.alwaysVisible,
railVisible = o.railVisible,
railColor = o.railColor,
railOpacity = o.railOpacity,
allowPageScroll = o.allowPageScroll,
scroll = o.scroll;
// used in event handlers and for better minification
var me = $(this);
//ensure we are not binding it again
if (me.parent().hasClass('slimScrollDiv'))
...