multiscroll.js插件使用

multiscroll.js 和 fullpage.js 有点类似，也是页面全屏滚动，只不过 fullpage.js 是整屏滚动，而 multiscroll.js 是分成左右两个面板，垂直反向滚动合在一起。

项目地址：https://github.com/alvarotrigo/multiscroll.js

兼容性
IE8及以上支持全部功能，IE6、7支持核心的滚动功能，但是其他功能不支持
使用
引入文件

<link rel="stylesheet" href="jquery.multiscroll.css">
<script src="jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.multiscroll.min.js"></script>

基本的html结构演示

<div class="wrapper">
    <div class="ms-left">
        <div class="ms-section">left1</div>
        <div class="ms-section">left2</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">right1</div>
        <div class="ms-section">right2</div>
    </div>
</div>

注意类名ms-left、ms-right、ms-section不能更改

JavaScript：

$(function(){
    $('#wrapper').multiscroll();
});

更完整的JavaScript配置可能如下：

$(document).ready(function() {
    $('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        keyboardScrolling: true,
        touchSensitivity: 5,

        //responsive
        responsiveWidth: 0,
        responsiveHeight: 0,
        responsiveExpand: false,

        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',

        //events
        onLeave: function(index, nextIndex, direction){},
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});

http://www.dowebok.com/127.html” title=”” />

图片来自http://www.dowebok.com/

对上述的一些参数和方法做一些补充说明：
关于添加背景颜色的sectionsColor选项的配置例子：

$('#multiscroll').multiscroll({
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

在使用锚点选项anchors的时候，不能让锚点值等于任何id值。

easing选项是用来定义用于垂直和水平滚动的过渡效果，它需要jquery.easings.min.js或jQuery UI作为依赖，也可以用其他库。

menu选项可以使用data-menuanchor配置项指定需要链接的部分的菜单，这样，当鼠标滚动到新页面的时候，指定的菜单项也会被激活。使用的时候将锚点值赋给配置项data-menuanchor就可以了

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

$('#multiscroll').multiscroll({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

moveSectionUp()
向上滚动一部分：

$.fn.multiscroll.moveSectionUp();

moveSectionDown()
向下滚动一部分：

$.fn.multiscroll.moveSectionDown();

moveTo(section)
滚动到指定部分，参数可以是锚点也可以是索引section

$.fn.multiscroll.moveTo('firstSection'); //跳转到锚点firstSection
$.fn.multiscroll.moveTo(3); //跳转到索引为3的页面

setKeyboardScrolling
设置是否可以用键盘控制页面跳转

$.fn.multiscroll.setKeyboardScrolling(false);

setScrollingSpeed
设置页面转换时间

$.fn.multiscroll.setScrollingSpeed(700);

destroy/build
取消插件事件和重建取消的插件事件

$.fn.multiscroll.destroy()/build();

回调函数
afterLoad(anchorLink,index)
在滚动结束之后，加载了这些部分后的回调
在插件中没有定义anchorLink的情况下，索引参数将是唯一使用的参数。

$('#multiscroll').multiscroll({
        anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

        afterLoad: function(anchorLink, index){
            //using index
            if(index == '3'){
                alert("Section 3 ended loading");
            }

            //using anchorLink
            if(anchorLink == 'secondSection'){
                alert("Section 2 ended loading");
            }
        }
    });

onLeave (index, nextIndex, direction)
一旦用户离开了一个部分，转换到新的部分，这个回调就被触发

$('#multiscroll').multiscroll({
        onLeave: function(index, direction){
            //after leaving section 2
            if(index == '2' && direction =='down'){
                alert("Going to section 3!");
            }

            else if(index == '2' && direction == 'up'){
                alert("Going to section 1!");
            }
        }
    });

afterRender()
在生成页面的结构之后，这个回调被触发。这是您要用于初始化其他插件或者启动任何需要准备好文档的代码的回调（因为此插件会修改DOM以创建结果）

$('#multiscroll').multiscroll({
        afterRender: function(){
            alert("The resulting DOM structure is ready");
        }
    });

afterResize()
调整浏览器窗口大小后会触发此回调

$('#multiscroll').multiscroll({
        afterResize: function(){
            alert("The sections have finished resizing");
        }
    });

引入拓展：

<script type="text/javascript" src="multiscroll.responsiveExpand.min.js"></script>
<script type="text/javascript" src="jquery.multiscroll.extensions.min.js"></script>

有几个参考网站：
http://homecoming.nust.edu.pk/
http://www.lob.com.mx/primavera15
http://www.proviotic.com/
http://noisacco.fr/mumm/#first
http://designova.net/reflex/index07.html