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.
Next TopicJQuery Sort
JQuery Multiscroll.js

JQuery Multiscroll.js

Example 1:

Method in Java

Delete Multiple Records using Checkbox in Laravel

You may also like
