JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<script src="https://raw.github.com/gist/9537f3278f6f92f91937/320b441c9b899796d4176cf15a21d63269e846c3/test.moofx.scroll.js"></script>
<a onclick="_scroll.toTop()">toTop</a>
<a onclick="_scroll.toLeft()">toLeft</a>
<a onclick="_scroll.toRight()">toRight</a>
<a onclick="_scroll.toBottom()">toBottom</a>
<a onclick="toElement()">toElement</a>
<a onclick="toElementEdge()">toElementEdge</a>
<a onclick="toElementCenter()">toElementCenter</a>

  <div id="scrollExample" style="position:absolute;bottom:0;height: 300px; overflow: auto; width: 400px;">
    <ul style="width: 500px;">
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li id="yellow" style="color: yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim...

CSS

#red { margin-left:10px;}

JavaScript

var $ = window.$;
var moofx = window.moofx;

var container = $('#scrollExample');
window._scroll = new moofx.scroll(container,{useScrollBarSize:true});
console.log(window._scroll.scrollBarSize);
/* - test pandas - */
window._element = $('#red');


window.toElement = function() {
    _scroll.toElement(_element);
}
window.toElementEdge = function() {
    _scroll.toElementEdge(_element);
}

window.toElementCenter = function() {
    _scroll.toElementCenter(_element, ['x','y']);
}