JQuery Multiscroll.js

In this article, we will understand about the multiscoll.js plugin in detail with the help of example. In this we can move the slide in multiple directions at the same time i.e. either left or right and top or bottom.
Example 1:

<! DOCTYPE HTML>
<html>
	<head>
		<title>
			JQuery Multiscroll.js 
		</title>
		<link href="https://github.com/alvarotrigo/multiscroll.js/blob/master/jquery.multiscroll.css"> 
		<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
<script src = "https://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"> </script>
<script src="https://github.com/alvarotrigo/multiscroll.js/blob/master/dist/jquery.multiscroll.js"> </script>
	</head>
	<style>
	.spacer {
  height: 600px;
  width: 100%;
  background: red;
  position:relative;
  z-index: 999;
}

.container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow:hidden;
  background:blue;
}
.normal {
  height: 400px !important;
  width: 100%;
  background: red;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
html, body {
    margin: 0;
    padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ms-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    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 {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
#multiscroll-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#multiscroll-nav.right {
    right: 17px;
}
#multiscroll-nav.left {
    left: 17px;
}
#multiscroll-nav ul{
  margin: 0;
  padding: 0;
}
#multiscroll-nav li{
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
#multiscroll-nav li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#multiscroll-nav li .active span{
    background: #333;
}
#multiscroll-nav span{
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
.multiscroll-tooltip {
    position: absolute;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    top: -2px;
    white-space: nowrap;
    max-width: 220px;
}
.multiscroll-tooltip.right {
    right: 20px;
}
.multiscroll-tooltip.left {
    left: 20px;
}
</style>
	<body>
	<center>
		<h1> Example </h1>
		<h2> jQuery multiscroll </h2>
<div class = "container">
  <div id = "multiscroll">
    <div class = "ms-left">
        <div class = "ms-section"> Section 1 Left </div> 
        <div class = "ms-section"> Section 2 Left </div>
        <div class = "ms-section"> Section 3 Left </div>
    </div>
    <div class = "ms-right">
        <div class = "ms-section"> Section 1 Right </div>
        <div class = "ms-section"> Section 2 Right </div>
        <div class = "ms-section"> Section 3 Right </div>
    </div>
  </div>
</div>
		<script>
(function($, window, document, Math, undefined) {
	$.fn.multiscroll = function(options) {
		var MS = $.fn.multiscroll;
		options = $.extend({
			'verticalCentered' : true,
			'scrollingSpeed': 700,
			'easing': 'easeInQuart',
			'menu': false,
			'sectionsColor': [],
			'anchors':[],
			'navigation': false,
			'navigationPosition': 'right',
			'navigationColor': '#000',
			'navigationTooltips': [],
			'loopBottom': false,
			'loopTop': false,
			'css3': false,
			'paddingTop': 0,
			'paddingBottom': 0,
			'fixedElements': null,
			'normalScrollElements': null,
			'keyboardScrolling': true,
			'touchSensitivity': 5,
			'sectionSelector': '.ms-section',
			'leftSelector': '.ms-left',
			'rightSelector': '.ms-right',
			'afterLoad': null,
			'onLeave': null,
			'afterRender': null,
			'afterResize': null
		}, options);
		var scrollDelay = 600;
		var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
		if (options.rightSelector !== '.ms-right') {
			$(options.rightSelector).addClass('ms-right');
		}
		if (options.leftSelector !== '.ms-left') {
			$(options.leftSelector).addClass('ms-left');
		}
		var numberSections = $('.ms-left').find('.ms-section').length;
		var isMoving = false;
		var nav;
		var windowHeight = $(window).height();
		addMouseWheelHandler();
		addTouchHandler();
		if(options.css3){
			options.css3 = support3d();
		}
		if (options.sectionSelector !== '.ms-section') {
			$(options.sectionSelector).each(function(){
				$(this).addClass('ms-section');
			});
		}
		if (options.navigation) {
			$('body').append('<div id="multiscroll-nav"><ul></ul></div>');
			nav = $('#multiscroll-nav');

			nav.css('color', options.navigationColor);
			nav.addClass(options.navigationPosition);
		}
		$('.ms-right, .ms-left').css({
			'width': '50%',
			'position': 'absolute',
			'height': '100%',
			'-ms-touch-action': 'none'
		});
		$('.ms-right').css({
			'right': '1px', //http://stackoverflow.com/questions/23675457/chrome-and-opera-creating-small-padding-when-using-displaytable
			'top': '0',
			'-ms-touch-action': 'none',
			'touch-action': 'none'
		});
		$('.ms-left').css({
			'left': '0',
			'top': '0',
			'-ms-touch-action': 'none',
			'touch-action': 'none'
		});
		$('.ms-left .ms-section, .ms-right .ms-section').each(function(){
			var sectionIndex = $(this).index();
			if(options.paddingTop || options.paddingBottom){
				$(this).css('padding', options.paddingTop  + ' 0 ' + options.paddingBottom + ' 0');
			}
			if (typeof options.sectionsColor[sectionIndex] !==  'undefined') {
				$(this).css('background-color', options.sectionsColor[sectionIndex]);
			}
			if (typeof options.anchors[sectionIndex] !== 'undefined') {
				$(this).attr('data-anchor', options.anchors[sectionIndex]);
			}
			if(options.verticalCentered){
				addTableClass($(this));
			}
			if($(this).closest('.ms-left').length && options.navigation) {
				var link = '';
				if(options.anchors.length){
					link = options.anchors[sectionIndex];
				}
				var tooltip = options.navigationTooltips[sectionIndex];
				if(typeof tooltip === 'undefined'){
					tooltip = '';
				}
				if (options.navigation) {
					nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span></span></a></li>');
				}
			}
		});
		$('.ms-right').html( $('.ms-right').find('.ms-section').get().reverse());
		$('.ms-left .ms-section, .ms-right .ms-section').each(function(){
			var sectionIndex = $(this).index();
			$(this).css({
				'height': '100%'
			});
			if(!sectionIndex && options.navigation ){
				nav.find('li').eq(sectionIndex).find('a').addClass('active');
			}
		}).promise().done(function(){
			if(!$('.ms-left .ms-section.active').length){
				$('.ms-right').find('.ms-section').last().addClass('active');
				$('.ms-left').find('.ms-section').first().addClass('active');
			}
			if(options.navigation){
				nav.css('margin-top', '-' + (nav.height()/2) + 'px');
			}
			$.isFunction( options.afterRender ) && options.afterRender.call( this);
			silentScroll();
			setBodyClass();
			$(window).on('load', function() {
				scrollToAnchor();
			});
		});
		$(window).on('hashchange', hashChangeHandler);
		function hashChangeHandler(){
			var value =  window.location.hash.replace('#', '');
			var sectionAnchor = value;
			if(sectionAnchor.length){
				var section = $('.ms-left').find('[data-anchor="'+sectionAnchor+'"]');

				var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' );
				if (isFirstScrollMove || sectionAnchor !== lastScrolledDestiny){
					scrollPage(section);
				}
			}
		};
		$(document).keydown(keydownHandler);
		var keydownId;
		function keydownHandler(e) {
			clearTimeout(keydownId);
			var activeElement = $(document.activeElement);
			if(!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select') &&
				options.keyboardScrolling){
				var keyCode = e.which;
				var keyControls = [40, 38, 32, 33, 34];
				if($.inArray(keyCode, keyControls) > -1){
					e.preventDefault();
				}
				keydownId = setTimeout(function(){
					onkeydown(e);
				},150);
			}
		}
		function onkeydown(e){
			var shiftPressed = e.shiftKey;

			switch (e.which) {
				case 38:
				case 33:
					MS.moveSectionUp();
					break;
				case 32: 
					if(shiftPressed){
						MS.moveSectionUp();
						break;
					}
				case 40:
				case 34:
					MS.moveSectionDown();
					break;
				case 36:
					MS.moveTo(1);
					break;
				case 35:
					MS.moveTo( $('.ms-left .ms-section').length);
					break;

				default:
					return; 
			}
		}
		$(document).mousedown(function(e) {
			if(e.button == 1){
				e.preventDefault();
				return false;
			}
		});
		$(document).on('click', '#multiscroll-nav a', function(e){
			e.preventDefault();
			var index = $(this).parent().index();
			scrollPage($('.ms-left .ms-section').eq(index));
		});
		$(document).on({
			mouseenter: function(){
				var tooltip = $(this).data('tooltip');
				$('<div class="multiscroll-tooltip ' + options.navigationPosition +'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
			},
			mouseleave: function(){
				$(this).find('.multiscroll-tooltip').fadeOut(200, function() {
					$(this).remove();
				});
			}
		}, '#multiscroll-nav li');
		if(options.normalScrollElements){
			$(document).on('mouseenter', options.normalScrollElements, function () {
				MS.setMouseWheelScrolling(false);
			});

			$(document).on('mouseleave', options.normalScrollElements, function(){
				MS.setMouseWheelScrolling(true);
			});
		}
		$(window).on('resize', doneResizing);
		function doneResizing() {
			windowHeight = $(window).height();
			$('.ms-tableCell').each(function() {
				$(this).css({ height: getTableHeight($(this).parent()) });
			});
			silentScroll();
			$.isFunction( options.afterResize ) && options.afterResize.call( this);
		}
		function silentScroll(){
			if(options.css3){
				transformContainer($('.ms-left'), 'translate3d(0px, -' + $('.ms-left').find('.ms-section.active').position().top + 'px, 0px)', false);
				transformContainer($('.ms-right'), 'translate3d(0px, -' + $('.ms-right').find('.ms-section.active').position().top + 'px, 0px)', false);
			}else{
				$('.ms-left').css('top', -$('.ms-left').find('.ms-section.active').position().top );
				$('.ms-right').css('top', -$('.ms-right').find('.ms-section.active').position().top );
			}
		}
		MS.moveSectionUp = function(){
			var prev = $('.ms-left .ms-section.active').prev('.ms-section');

			if(!prev.length && options.loopTop){
				prev = $('.ms-left .ms-section').last();
			}
			if (prev.length) {
				scrollPage(prev);
			}
		};
		MS.moveSectionDown = function (){
			var next = $('.ms-left .ms-section.active').next('.ms-section');
			if(!next.length && options.loopBottom ){
				next = $('.ms-left .ms-section').first();
			}
			if(next.length){
				scrollPage(next);
			}
		};
		MS.moveTo = function (section){
			var destiny = '';
			if(isNaN(section)){
				destiny = $('.ms-left [data-anchor="'+section+'"]');
			}else{
				destiny = $('.ms-left .ms-section').eq( (section -1) );
			}
			scrollPage(destiny);
		};
		function scrollPage(leftDestination){
			var leftDestinationIndex = leftDestination.index();
			var rightDestination = $('.ms-right').find('.ms-section').eq( numberSections -1 - leftDestinationIndex);
			var rightDestinationIndex = numberSections - 1 - leftDestinationIndex;
			var anchorLink  = leftDestination.data('anchor');
			var activeSection = $('.ms-left .ms-section.active');
			var leavingSection = activeSection.index() + 1;
			var yMovement = getYmovement(leftDestination);
			isMoving = true;
			var topPos = {
				'left' : leftDestination.position().top,
				'right': rightDestination.position().top
			};
			rightDestination.addClass('active').siblings().removeClass('active');
			leftDestination.addClass('active').siblings().removeClass('active');
			setURLHash(anchorLink);
			if (options.css3){
				$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
				var translate3dLeft = 'translate3d(0px, -' + topPos['left'] + 'px, 0px)';
				var translate3dRight = 'translate3d(0px, -' + topPos['right'] + 'px, 0px)';
				transformContainer($('.ms-left'), translate3dLeft, true);
				transformContainer($('.ms-right'), translate3dRight, true);
				setTimeout(function () {
					$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
					setTimeout(function () {
						isMoving = false;
					}, scrollDelay);
				}, options.scrollingSpeed);
			}else{
				$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
				$('.ms-left').animate({
					'top': -topPos['left']
				}, options.scrollingSpeed, options.easing, function(){
					$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
					setTimeout(function () {
						isMoving = false;
					}, scrollDelay);
				});
				$('.ms-right').animate({
					'top': -topPos['right']
				}, options.scrollingSpeed, options.easing);
			}
			lastScrolledDestiny = anchorLink;
			activateMenuElement(anchorLink);
			activateNavDots(anchorLink, leftDestinationIndex);
		}
		function removeMouseWheelHandler(){
			if (document.addEventListener) {
				document.removeEventListener('mousewheel', MouseWheelHandler, false); 
				document.removeEventListener('wheel', MouseWheelHandler, false); 
			} else {
				document.detachEvent("onmousewheel", MouseWheelHandler); 
			}
		}
		function addMouseWheelHandler(){
			if (document.addEventListener) {
				document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
				document.addEventListener("wheel", MouseWheelHandler, false); //Firefox
			} else {
				document.attachEvent("onmousewheel", MouseWheelHandler); 
			}
		}
		function MouseWheelHandler(e) {
		
			e = window.event || e;
			var delta = Math.max(-1, Math.min(1,
					(e.wheelDelta || -e.deltaY || -e.detail)));
			if (!isMoving) { 
				if (delta < 0) {
					MS.moveSectionDown();
				}
				else {
					MS.moveSectionUp();
				}
			}


			return false;
		}
		function getTransforms(translate3d){
			return {
				'-webkit-transform': translate3d,
				'-moz-transform': translate3d,
				'-ms-transform':translate3d,
				'transform': translate3d
			};
		}
		function activateNavDots(name, sectionIndex){
			if(options.navigation){
				$('#multiscroll-nav').find('.active').removeClass('active');
				if(name){
					$('#multiscroll-nav').find('a[href="#' + name + '"]').addClass('active');
				}else{
					$('#multiscroll-nav').find('li').eq(sectionIndex).find('a').addClass('active');
				}
			}
		}
		function getYmovement(destiny){
			var fromIndex = $('.ms-left .ms-section.active').index();
			var toIndex = destiny.index();

			if(fromIndex > toIndex){
				return 'up';
			}
			return 'down';
		}
		function setURLHash(anchorLink){
			if(options.anchors.length){
				location.hash = anchorLink;
			}
			setBodyClass();
		}
		function setBodyClass(){
			var section = $('.ms-left .ms-section.active');
			var sectionAnchor = section.data('anchor');
			var sectionIndex = section.index();
			var text = String(sectionIndex);
			if(options.anchors.length){
				text = sectionAnchor;
			}
			text = text.replace('/', '-').replace('#','');
			var classRe = new RegExp('\\b\\s?' + 'ms-viewing' + '-[^\\s]+\\b', "g");
			$('body')[0].className = $('body')[0].className.replace(classRe, '');
			$('body').addClass('ms-viewing-' + text);
		}
		function support3d() {
			var el = document.createElement('p'),
				has3d,
				transforms = {
					'webkitTransform':'-webkit-transform',
					'OTransform':'-o-transform',
					'msTransform':'-ms-transform',
					'MozTransform':'-moz-transform',
					'transform':'transform'
				};
			document.body.insertBefore(el, null);
			for (var t in transforms) {
				if (el.style[t] !== undefined) {
					el.style[t] = "translate3d(1px,1px,1px)";
					has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
				}
			}
			document.body.removeChild(el);
			return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
		}
		function addTableClass(element){
			element.addClass('ms-table').wrapInner('<div class="ms-tableCell" style="height: ' + getTableHeight(element) + 'px" />');
		}
		function getTableHeight(section){
			var sectionHeight = windowHeight;
			if(options.paddingTop || options.paddingBottom){
				var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom'));
				sectionHeight = (windowHeight - paddings);
			}

			return sectionHeight;
		}
		function scrollToAnchor(){
			var sectionAnchor =  window.location.hash.replace('#', '');
			var section = $('.ms-left .ms-section[data-anchor="'+sectionAnchor+'"]');
			if(sectionAnchor.length){ 
				scrollPage(section);
			}
		}
		var touchStartY = 0;
		var touchStartX = 0;
		var touchEndY = 0;
		var touchEndX = 0;
		function touchMoveHandler(event){
			var e = event.originalEvent;
			if(isReallyTouch(e)){
				event.preventDefault();
				var activeSection = $('.ms-left .ms-section.active');
				if (!isMoving) { 
					var touchEvents = getEventsPage(e);
					touchEndY = touchEvents['y'];
					touchEndX = touchEvents['x'];
					if (Math.abs(touchStartY - touchEndY) > ($(window).height() / 100 * options.touchSensitivity)) {
						if (touchStartY > touchEndY) {
							MS.moveSectionDown();

						} else if (touchEndY > touchStartY) {
							MS.moveSectionUp();
						}
					}
				}
			}
		}
		function addTouchHandler(){
			if(isTouch){
				MSPointer = getMSPointer();
				$(document).off('touchstart ' +  MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
				$(document).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
			}
		}
		function getEventsPage(e){
			var events = [];
			events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
			events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);
			if(isTouch && isReallyTouch(e)){
				events.y = e.touches[0].pageY;
				events.x = e.touches[0].pageX;
			}

			return events;
		}
		MS.destroy = function() {
			MS.setKeyboardScrolling(false);
			MS.setMouseWheelScrolling(false);
			$(window)
				.off('hashchange', hashChangeHandler)
				.off('resize', doneResizing);
			$(document)
				.off('mouseenter', '#multiscroll-nav li')
				.off('mouseleave', '#multiscroll-nav li')
				.off('click', '#multiscroll-nav a');
		};
		MS.build = function() {
			MS.setKeyboardScrolling(true);
			MS.setMouseWheelScrolling(true);
			$(window)
				.on('hashchange', hashChangeHandler)
				.on('resize', doneResizing);
			$(document)
				.on('mouseenter', '#multiscroll-nav li')
				.on('mouseleave', '#multiscroll-nav li')
				.on('click', '#multiscroll-nav a');
		};
	};
})(jQuery, window, document, Math);
var entering = true;
$(document).ready(function() {
  $('.spacer').click(function() {
    console.log("spacer clicked");
    $('html, body').animate({
        scrollTop: $(".spacer.one").height()
    }, 200);
    $('html').css("overflow","hidden");
    $('body').css("overflow","hidden");
  });
  $(window).scroll(function() {
    scroll_loc = $(window).scrollTop();
    top_loc = $(".spacer.one").height(); 
    if(scroll_loc < top_loc) {
      entering = true;
    }
  })
  $('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 300,
        easing: 'easeInQuart',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: true,
        paddingTop: '100px',
        paddingBottom: 0,
        normalScrollElements: '.normal, .spacer',
        keyboardScrolling: false,
        allowScrolling: false,
        touchSensitivity: 5,
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',
        onLeave: function(index, nextIndex, direction){
          console.log('index: '+index+' nextIndex: ' +nextIndex + ' direction: '+direction);
          var scroll_to = $("#multiscroll").offset().top;
          if(index == 2 && direction == 'up') {
            $('html, body').animate({
                scrollTop: scroll_to
            }, 600, function() {
              $('html').css("overflow","auto");
              $('body').css("overflow","auto");
            });
          } else if(index == 2 && direction == 'down') {
            $('html, body').animate({ 
                scrollTop: scroll_to
            }, 600, function() {
              $('html').css("overflow","auto");
              $('body').css("overflow","auto");
            });
          } else if(index == 1 && direction == 'down' && entering) {
            entering = false;
            $.fn.multiscroll.moveTo(0);
            console.log("entered");
          } else {   
            if(entering) {
              entering = false;
              console.log("test");
              window.setTimeout(function() {
              }, 400);
            }
              $('html').css("overflow","hidden");
              $('body').css("overflow","hidden");
              $('html, body').animate({
                  scrollTop: scroll_to
              }, 200);
          }
        },
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});
		</script>
	</body>
</html>	
Explanation:
In the above example, we can scroll the web page in multiple directions.
Output:
Following is the output of this example.