JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

CSS

.hscroll {
    height:50px;
    white-space:nowrap;
}

.onyx-button {
    display:inline-block;
}

JavaScript

enyo.kind({
    name:"HSnapScroller",
    kind:"Scroller",
    touch:true,
    vertical:"hidden",
    horizontal:"scroll",
    classes:"hscroll",
    initComponents:function() {
        this.components = this.components || [];
        this.components.unshift({name:"lSpace", style:"display:inline-block", isChrome:true, owner:this});
        this.components.push({name:"rSpace", style:"display:inline-block", isChrome:true, owner:this});
        
        this.inherited(arguments);        
    },
    rendered:function() {
        this.inherited(arguments);
        this.resizeHandler();
    },
    resizeHandler:function() {
        this.inherited(arguments);
        
        var scrollerNode = this.hasNode();
        if(!scrollerNode) return;
        
        var c = this.getClientControls(),
            w = scrollerNode.scrollWidth,
            c1 = c[1],
            c2 = c[c.length-2];
        
        this.paddingLeft = Math.round(w/2-c1.getBounds().width/2);
        this.paddingRight = Math.round(w/2-c2.getBounds().width/2);
        
        this.$.lSpace.applyStyle("width", this.paddingLeft+"px");
        this.$.rSpace.applyStyle("width", this.paddingRight+"px");
    },
    scrollStart:function(source, event) {
        this.inherited(arguments);
    
        if(this.fixingPosition == 1) {
            this.fixingPosition++;
        } else {
            this.fixingPosition = 0;
        }
    },
    scrollStop:function(source, event) {
        this.inherited(arguments);
        
        if(this.fixingPosition == 2) return;
                
        var c = this.getClientControls();
        var scrollerNode = this.hasNode();
        var half = scrollerNode.scrollWidth/2;
        var center = this.getScrollLeft() + half;
        
        for(var i=0,l=c.length;i<l;i++) {
            var b = c[i].getBounds();
            this.log(center, b.left, b.width);
            if(center > b.left && center < b.left + b.width) {
                this.fixingPosition = 1;
             ...