JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div id="container">
<div class="fill-browser" style="background-image: url('http://lakes.peak1.titaninternet.co.uk/index/coniston-large.jpg')"></div>
<div class="fill-browser" style="background-image: url('http://lakes.peak1.titaninternet.co.uk/index/coniston-large.jpg')"></div>
<div class="fill-browser" style="background-image: url('http://lakes.peak1.titaninternet.co.uk/index/coniston-large.jpg')"></div>
</div>

CSS

.fill-browser{
    position:relative;
    left: 1%;
    height:98%;
    width:98%;
    margin-bottom: 5px;
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
            }

JavaScript

$(document).ready(function(){
        Resize();
        });

        //Every resize of window
        $(window).resize(function() {
            Resize();
        });

        //Dynamically assign height
        function Resize() {
            // Handler for .ready() called.
            var windowHeight = $(window).height() + 'px';
            $('.fill-browser').css('height', windowHeight);
        }

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = $(".fill-browser").height();
	var running = false;
	var timeout = null;
	
    $(window).scroll(function(){
	
		if(running)
			return;
		
		clearTimeout(timeout);
		timeout = setTimeout(function() {
			running = true;
			var _cur_top = $(window).scrollTop();
			var totalHeight = $('body').height();
			var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

			$('html, body').stop().animate({scrollTop: posToScroll}, {duration:200, complete: function(){running = false;}});
		}, 200);
		
    });
});