JSFiddle - React, Tailwind, and code Playground
JavaScript
//jQuery vertical scroller plugin v1.6
//Author: Simon Battersby, www.simonbattersby.com
//Documentation: http://www.simonbattersby.com/blog/vertical-scrollbar-plugin-using-jquery-ui-slider/
(function( $ ){
$.fn.sbscroller = function( options ) {
var settings = {//defaults
handleImage : false,
handleTopImage : false,
handleBottomImage : false,
handleGripImage : false,
mousewheel : false,
autohide : false
};
return this.each(function() {
if (options === 'refresh') {
$.extend( settings, $(this).data() );//include any previously stored options for this scroll pane
if (!$(this).hasClass('scroll-pane')){//traps the case where refresh has been called on slider that has not been set up
$(this).addClass('scroll-pane').data(options);//add a class and store the options as data against the element in case they are needed later
$(this).children().wrapAll('<div class="scroll-content"/>');
}
setSlider($(this));
}
else {
if ( options ) {
$.extend( settings, options );
}
$(this).addClass('scroll-pane').data(options);//add a class and store the options as data against the element in case they are needed later
$(this).children().wrapAll('<div class="scroll-content"/>');
setSlider($(this));
}
});
function setSlider($scrollpane){
//change the main div to overflow-hidden as we can use the slider now
$scrollpane.css('overflow','hidden');
//compare the height of the scroll content to the scroll pane to see if we need a scrollbar
var difference = $scrollpane.find('.scroll-content').height()-$scrollpane.height();//eg it's 200px longer
$scrollpane.data('difference',difference);
if(difference<=0 && $scrollpane.find('.slider-wrap').length>0)//scrollbar exists but is no longer required
...