JSFiddle - React, Tailwind, and code Playground

by Trevor Power

HTML

<button type "button">More</button>
<div>
    <ul />
</div>

SCSS

div {
    width: 300px;
    height: 350px;
    background-color: #ddd;
    overflow: auto;
    
    ul {
        padding: 0;
        margin: 0px;
        li {
            width: 200px;
            height: 100px;
            background-color: #d43;
            margin: 1px auto;
            list-style: none;
        }
    }
}

JavaScript

// time unit is m
// distance unit is px

var v = 0;
var lastP = {
    time: Date.now(),
    value: 0
};
console.log(lastP);

$.easing[ "custom" ] = function( p ) {
    console.log(p);
    return 0.5 - Math.cos( p * Math.PI ) / 2
};

$(function () {
   	var $container = $('div');
    var $list = $('ul');
    
    $('button').click(function () {
        $list.append($('<li />'));
        
        $container.stop();
        $container.animate({ 
        	scrollTop: $list.height() - $container.height()
        }, {
            duration: 2000,
            step: function(now, tween){
                var d = now - lastP.value;
                var t = Date.now() - lastP.time;
                console.log(d / t);
                console.log(tween.start, tween.now, tween.end, v);
        	}
        });
    });
});