JSFiddle - React, Tailwind, and code Playground
HTML
<div id="myContainer">
<div class="ms-left">
<!-- Section 1 left -->
<div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<h1>Section 1 left</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->
<!-- Section 2 left -->
<div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<h1>Section 2 left</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->
</div><!-- /.ms-left -->
<div class="ms-right">
<!-- Section 1 right -->
<div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<div class="ms-section-content">
<h1>Section 1 right</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->
<!-- Section 2 right -->
<div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);">
<div class="ms-section-content">
<h1>Section 2 right</h1>
</div><!-- /.ms-section-content -->
</div><!-- /.ms-section -->
</div><!-- /.ms-right -->
</div><!-- #myContainer -->
CSS
/**
* multiscroll 0.0.6 Beta
* https://github.com/alvarotrigo/multiscroll.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
.ms-section {
position: relative;
@include box-sizing(border-box);
}
.ms-section.ms-table{
display: table;
width: 100%;
}
.ms-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.ms-easing {
@include transition(all 0.7s ease-out);
}
/* Custom styles */
.ms-section {
text-align: center;
}
/* The media query */
@media screen and (max-width: 700px) {
.ms-section section2 {
display: none;
}
}
JavaScript
/**
* multiscroll.js 0.1.5 Beta
* https://github.com/alvarotrigo/multiscroll.js
* MIT licensed
*
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
*/
(function(a){a.fn.multiscroll=function(b){function w(){q=a(window).height();a(".ms-tableCell").each(function(){a(this).css({height:r(a(this).parent())})});s();a.isFunction(b.afterResize)&&b.afterResize.call(this)}function s(){b.css3?(m(a(".ms-left"),"translate3d(0px, -"+a(".ms-left").find(".ms-section.active").position().top+"px, 0px)",!1),m(a(".ms-right"),"translate3d(0px, -"+a(".ms-right").find(".ms-section.active").position().top+"px, 0px)",!1)):(a(".ms-left").css("top",-a(".ms-left").find(".ms-section.active").position().top),
a(".ms-right").css("top",-a(".ms-right").find(".ms-section.active").position().top))}function e(c){var d=c.index(),t=a(".ms-right").find(".ms-section").eq(x-1-d),f=c.data("anchor"),e=a(".ms-left .ms-section.active").index()+1,g=y(c);h=!0;b.anchors.length&&(location.hash=f);var k={left:c.position().top,right:t.position().top};t.addClass("active").siblings().removeClass("active");c.addClass("active").siblings().removeClass("active");b.css3?(a.isFunction(b.onLeave)&&b.onLeave.call(this,e,d+1,g),c="translate3d(0px, -"+
k.left+"px, 0px)",k="translate3d(0px, -"+k.right+"px, 0px)",m(a(".ms-left"),c,!0),m(a(".ms-right"),k,!0),setTimeout(function(){a.isFunction(b.afterLoad)&&b.afterLoad.call(this,f,d+1);setTimeout(function(){h=!1},600)},b.scrollingSpeed)):(a.isFunction(b.onLeave)&&b.onLeave.call(this,e,d+1,g),a(".ms-left").animate({top:-k.left},b.scrollingSpeed,b.easing,function(){a.isFunction(b.afterLoad)&&b.afterLoad.call(this,f,d+1);setTimeout(function(){h=!1},600)}),a(".ms-right").animate({top:-k.right},b.scrollingSpeed,
b.easing));lastScrolledDestiny=f;z(f);A(f,d)}function u(){document.addEventListener?(document.addEventListener("mousewheel",g,!1),document.addEventListener("wheel",g,!1)):document.attachEvent("onmousewheel",g)}function...