JSFiddle - React, Tailwind, and code Playground

by julianlam

HTML

<p id="notice">
    The following is a demo of version 0.2.9 of the Scrollable plugin. Please check <a href="http://mootools.net/forge/p/scrollable">this plugin's home</a> on Mootools Forge for the latest stable version, or if you're brave, try the bleeding edge code on the project's <a href="https://github.com/julianlam/Scrollable">GitHub</a>.
</p>

<div id="container">
    <h4>Header</h4>
    <p style="text-align: center; font-weight: bold;">
        Hover over me to see the scrollbar on the right!
    </p>
    <p>
        Cupcake ipsum dolor sit amet gummi bears chocolate cake gummies chocolate bar. Candy canes applicake caramels fruitcake muffin sesame snaps cupcake tart. Tart muffin marshmallow. Chocolate bar tootsie roll danish sesame snaps toffee danish cookie marshmallow bear claw. Jujubes fruitcake bear claw cookie wafer faworki. Marzipan ice cream tiramisu brownie gingerbread faworki. Chupa chups pastry pudding candy canes icing muffin candy bear claw pie. Cheesecake chocolate bar soufflé topping sweet roll macaroon sweet halvah. Soufflé sugar plum danish candy canes cupcake sweet sweet cotton candy sugar plum. Cupcake sweet roll danish chocolate cake applicake. Tootsie roll carrot cake powder applicake muffin. Cheesecake chocolate bar wafer bonbon soufflé. Chupa chups jelly-o chocolate bar liquorice icing tiramisu marshmallow tart.
    </p>

    <p>
        Cookie jujubes sugar plum tart tiramisu chocolate pastry. Wafer soufflé faworki. Ice cream applicake tootsie roll biscuit cupcake. Caramels halvah lemon drops chocolate cake dragée apple pie. Candy canes topping candy carrot cake liquorice pie powder. Donut gingerbread cotton candy sweet gummi bears soufflé pudding oat cake candy canes. Cake marzipan chupa chups wafer. Wafer gummies icing bonbon. Cake cupcake liquorice carrot cake jelly-o marzipan lollipop. Cookie gummies tootsie roll tootsie roll. Marzipan cotton candy cupcake. Candy danish marshmallow sweet roll liquorice oat cake.
    </p>
</div>

CSS

/*
---
description: Unobtrusive modern scrollbar for elements with fixed heights
license: MIT
copyright: Copyright (c) 2011 by Julian Lam (julianlam).
authors:
- Julian Lam (julianlam)
...
*/

/* Scrollbar CSS */
.scrollbar {
    width: 21px;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    visibility: hidden;
}

.scrollbar .knob {
    background: #666;
    width: 7px;
    height: 50px;
    margin: 0 7px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    -moz-opacity: 0.75;
    opacity: 0.75;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

.scrollbar .knob:hover {
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}
/* End Scrollbar CSS */

#container {
    border: 2px solid #666;
    padding: 10px;
    width: 350px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}

#container h4 {
    font-family: tahoma, verdana, sans;
    margin-top: 10px;
}

#container p {
    font-size: 10px;
    font-family: tahoma, verdana, sans;
    line-height: 18px;
}

#notice {
    margin: 10px auto;
    width: 75%;
    font-weight: bold;
    background: #ddf;
    border: 1px solid #66d;
    padding: 10px;
    font-size: 12px;
}

JavaScript

/*
---
description: Unobtrusive modern scrollbar for elements with fixed heights
license: MIT
copyright: Copyright (c) 2011 by Julian Lam (julianlam).
authors:
- Julian Lam (julianlam)
requires:
- core/1.4.1: '*'
- more/1.4.0.1: [Slider, Element.measure]
provides: [Scrollable]
...
*/

var Scrollable = new Class({
    Implements: [Options, Events],

    options: {
        autoHide: 1,
        fade: 1,
        className: 'scrollbar',
        proportional: true,
        proportionalMinHeight: 15/*,
        onContentHeightChange: function(){}*/
    },

    initialize: function(element, options) {
        this.setOptions(options);

        if (typeOf(element) == 'elements') {
            var collection = [];
            element.each(function(element) {
                collection.push(new Scrollable(element, options));
            });
            return collection;
        }
        else {
            var scrollable = this;
            this.element = document.id(element);
            if (!this.element) return 0;

            this.active = false;

            // Renders a scrollbar over the given element
            this.container = new Element('div', {
                'class': this.options.className,
                html: '<div class="knob"></div>'
            }).inject(document.body, 'bottom');
            this.slider = new Slider(this.container, this.container.getElement('div'), {
                mode: 'vertical',
                onChange: function(step) {
                    this.element.scrollTop = ((this.element.scrollHeight - this.element.offsetHeight) * (step / 100));
                }.bind(this)
            });
            this.knob = this.container.getElement('div');
            this.reposition();
            if (!this.options.autoHide) this.container.fade('show');

            this.element.addEvents({
                'mouseenter': function() {
                    if (this.scrollHeight > this.offsetHeight) {
                        scrollable.showContainer();
...