JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div>click me</div>
<img src="http://4.bp.blogspot.com/_igllpLeQ1j4/TFiwNJHtyXI/AAAAAAAAA1c/vY5yCggrgAE/s1600/happy-kitten-kittens-5890512-1600-1200.jpg" />
<img src="http://4.bp.blogspot.com/_igllpLeQ1j4/TFiwNJHtyXI/AAAAAAAAA1c/vY5yCggrgAE/s1600/happy-kitten-kittens-5890512-1600-1200.jpg" />

CSS

body {
    width: 3200px;
}
div {
    background: silver;
    cursor: pointer;
    padding: 20px 0;
    text-align: center;
    position: fixed;
    width: 100%
}
img {
    display: inline;
    float: left;
}

JavaScript

var distance = 600,
    docWidth = $(document).width(),
    scrollPos;

// click handler
$("div").click(function() {
    
    // animate 
    $("html:not(:animated), body:not(:animated)").animate(
        // amount to scroll
        {scrollLeft: "+=" + distance},
        // scroll speed (ms)
        400,
        // callback function
        function(){
            // check our scroll position
            scrollPos = $(window).width() + $(window).scrollLeft(); 
            // if it equals the doc width, we're at the end
            if(docWidth === scrollPos) {
                $("div").text("End of the line");
            }
        }
    );    
    
});