JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://lab.stephaneguigne.com/js/jquery-scrollsections/example/js/vendor/modernizr-2.5.3.min.js"></script>
<script src="http://lab.stephaneguigne.com/js/jquery-scrollsections/example/js/plugins.js"></script>
<script src="http://dev.apptestonline.com/opco/wp-content/themes/twentyfourteen/js/_vendor/jquery.scrollSections.js"></script>
<section id="home" class="scrollsections">
	<div class="title">
        HOME
        <p class="overflow-txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo augue, fermentum ut finibus ac, congue eget mi. Duis quis neque accumsan, lacinia velit non, varius diam. Proin accumsan purus a mi varius blandit. Quisque egestas augue quis nunc ultricies aliquam. In rutrum vel enim nec tincidunt. Duis sed ultricies mauris, vitae accumsan ligula. Nulla facilisi. Ut consequat egestas enim. Pellentesque ligula risus, sodales sed dui at, gravida rutrum quam. Vestibulum gravida venenatis nisi, at viverra libero sagittis vel. Vestibulum vehicula odio feugiat turpis bibendum egestas. Suspendisse convallis mi in tortor pretium, a efficitur justo lobortis. Aenean in mauris molestie, convallis dolor ac, consectetur arcu. </p>
    </div>
    
</section>

<section id="about" class="scrollsections">
	<div class="title">
        ABOUT
        <p class="overflow-txt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus justo augue, fermentum ut finibus ac, congue eget mi. Duis quis neque accumsan, lacinia velit non, varius diam. Proin accumsan purus a mi varius blandit. Quisque egestas augue quis nunc ultricies aliquam. In rutrum vel enim nec tincidunt. Duis sed ultricies mauris, vitae accumsan ligula. Nulla facilisi. Ut consequat egestas enim. Pellentesque ligula risus, sodales sed dui at, gravida rutrum quam. Vestibulum gravida venenatis nisi, at viverra libero sagittis vel. Vestibulum vehicula odio feugiat turpis bibendum egestas. Suspendisse convallis mi in tortor pretium, a efficitur justo lobortis....

CSS

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.scrollsections {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
#scrollsections-navigation {
  position: fixed;
  top: 50%;
  right: 20px;
  width: 10px;
  margin-top: -177px;
  z-index: 100;
  background: transparent;
  overflow: hidden;
}
.scrollsections-menuitem {
  position: relative;
  display: block;
  height: 40px;
  width: 10px;
  overflow: hidden;
  background: #ffffff;
  text-indent: -9999px;
  margin: 0 0 5px 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.scrollsections-menuitem.active-scrollsection {
  width: 2px;
  margin-left: 8px;
  cursor: default;
}
#home {
  background: #000000;
}
#about {
  background: #1a1a1a;
}
#works {
  background: #333333;
}
#contact {
  background: #4d4d4d;
}
#other {
  background: #666666;
}
#clients {
  background: #808080;
}
#bio {
  background: #999999;
}
#networks {
  background: #b3b3b3;
}
section {
position: relative;
}
.title {
color: white;
line-height: 60px;
font-size: 60px;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -200px;
width: 400px;
text-align: center;
} 
.title p{
    font-size: 12px;
    max-height: 100px;
    line-height: 1.3em;
    overflow: auto;
}

JavaScript

$(function() {
	    disableScrollSectionMouseWheel = 0;
	    scrollSectionsController = $('section.scrollsections').scrollSections({
	        speed: 2000,
	        touch: false,
	        mousewheel: true,
	        exceptions: true,
	        scrollMax: 1,
	        exceptions: true,
	        alwaysStartWithFirstSection: true,
	        scrollbar: true
	    });
	    /* My Script To pause on hover */
	    $('section.scrollsections .title').hover(function(e) {
	        if ($(this).hasScrollBar()) {
	            disableScrollSectionMouseWheel = 1;
	        }
	    });
	    $('section.scrollsections .title').mouseleave(function(e) {
	        disableScrollSectionMouseWheel = 0;
	    });
	});
	(function($) {
	    $.fn.hasScrollBar = function() {
	        return this.get(0).scrollHeight > this.height();
	    }
	})(jQuery);