JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<a onclick="document.getElementById('scroll').xtag.toTop()">toTop</a>
<a onclick="document.getElementById('scroll').xtag.toLeft()">toLeft</a>
<a onclick="document.getElementById('scroll').xtag.toRight()">toRight</a>
<a onclick="document.getElementById('scroll').xtag.toBottom()">toBottom</a>
<a onclick="document.getElementById('scroll').xtag.toElement('#red')">toElement(#red)</a>

<x-scroll id="scroll">
    <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 rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
        <li>Lorem ipsum...

CSS

#scroll {
            height: 300px;
            overflow: auto;
            width: 500px;
            display: block;
        }

JavaScript

(function(a){var b={},c=function(d){var e=b[d];if(!e){e=b[d]={};var f=e.exports={};a[d].call(f,c,e,f,window)}return e.exports};c("0")})({0:function(a,b,c,d){"use strict",a("1");var e=a("2"),f=a("8"),g=a("d"),h=a("3"),i=undefined,j=function(a,b){if(!a||a==b)return{x:0,y:0};var c=j(a.offsetParent,b);return{x:a.offsetLeft+c.x,y:a.offsetTop+c.y}},k=h({inherits:e,constructor:function(a,b,c){var d=this;d.unit=c||"px",d.property=b,d.element=g(a)[0],d.set=function(a){d.element[b]=a},k.parent.constructor.call(d,d.set)}}),l=function(a){a=a||["x","y"];var b={x:!1,y:!1};for(var c=0,d=a.length;c<d;c++)switch(a[c]){case"x":b.x=!0;break;case"y":b.y=!0}return b},m=function(){document.body.style.overflow="hidden";var a=document.body.clientWidth;return document.body.style.overflow="scroll",a-=document.body.clientWidth,a||(a=document.body.offsetWidth-document.body.clientWidth),document.body.style.overflow="",a},n=f.scroll=h({constructor:function(a,b){i===undefined&&(i=m());var c=this;b=b||{},b.offset=b.offset||{},b.offset.x=b.offset.x||0,b.offset.y=b.offset.y||0,c.vertical=new k(a,"scrollTop","px"),c.horizontal=new k(a,"scrollLeft","px"),c.setOptions(b),c.element=g(a)[0]},setOptions:function(a){a=a||{},a.equations=a.equations||"default",a.durations=a.durations||"500ms",this.options=a},start:function(a,b){return a!==!1&&this.horizontal.start(this.element.scrollLeft,a+this.options.offset.x,this.options),b!==!1&&this.vertical.start(this.element.scrollTop,b+this.options.offset.y,this.options),this},toTop:function(){return this.start(!1,0)},toLeft:function(){return this.start(0,!1)},toBottom:function(){return this.start(!1,this.element.scrollHeight)},toRight:function(){return this.start(this.element.scrollWidth,!1)},toElement:function(a,b){b=l(b),a=g(a)[0];var c=j(a,this.element);return this.start(b.x&&c.x,b.y&&c.y)},toElementAtBottom:function(a,b){b=l(b),a=g(a)[0];var c=j(a,this.element);return...