multiscroll.js 上下视差滚动效果 jQuery 插件

Question

也许你已经知道 fullpage.js 是一个非常优秀插件，很多优秀的公司都在使用它，比如猪八戒、网易等等。今天我们再介绍一款该插件作者开发的另一款插件——multiscroll.js。multiscroll.js 和 fullpage.js 有点类似，也是页面全屏滚动，只不过 fullpage.js 是整屏滚动，而 multiscroll.js 是分成左右两个面板，垂直反向滚动合在一起。

因为效果和 fullpage.js 类似，且出自同一作者，所有这两款插件的一些属性和方法类似或相同，详细请查看页面下方的配置。

浏览器兼容

• IE8+
• Chrome
• Firefox
• Opera
• Safari

其实也可以兼容 IE6、IE7，因为最核心的滚动是支持的，只是有一些效果不支持，比如垂直居中。如果做一些兼容处理，也可以很好的兼容。

使用方法

1、引入文件

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

2、HTML

<div class="dowebok-Wrap">
    <div class="ms-left">
        <div class="ms-section">左1</div>
        <div class="ms-section">左2</div>
        <div class="ms-section">左3</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">右1</div>
        <div class="ms-section">右2</div>
        <div class="ms-section">右3</div>
    </div>
</div>

3、JavaScript

$(function(){
    $('#dowebok-Wrap').multiscroll();
});

可选参数

名称	类型	默认值	说明
verticalCentered	布尔值	true	内容垂直居中
scrollingSpeed	整数	700	过度时间，即页面滚动动画的时间，以毫秒为单位
sectionsColor	数组	[]	每一屏的背景颜色
anchors	数组	[]	定义每一屏的命名锚记
easing	字符串	‘easeInQuart’	过度方式
loopTop	布尔值	false	循环滚动（在第一屏时滚动到最后一屏）
loopBottom	布尔值	false	循环滚动（在最后一屏时滚动到第一屏）
css3	布尔值	false	选择使用 JavaScript 或 CSS3 transforms 滚动页面，使用 CSS3 transforms 能够更好的支持移动和平板设备。如果设置为 true，但浏览器不支持 CSS3 transforms，则回退使用 JavaScript
paddingTop	整数	0	顶部填充，你可以放置一个固定的头部（查看演示）
paddingBottom	整数	0	底部填充，你可以放置一个固定的底部（查看演示）
normalScrollElements	null/字符串	null
keyboardScrolling	布尔值	true	使用键盘导航
touchSensitivity	整数	5	定义浏览器窗口的宽度/高度的百分比，让用户滑动多少距离可以滚动到下一屏
menu	布尔值/字符串	false	绑定一个菜单
navigation	布尔值	false	显示圆点导航
navigationPosition	字符串	‘right’	圆点导航的位置，可选 left 或 right
navigationTooltips	数组	[]	圆点导航的提示信息

方法

名称	说明
moveSectionUp()	向上滚动一屏
moveSectionDown()	向下滚动一屏
moveTo()	滚动到某一屏，比如1）滚动到某一个命名锚记：$.fn.multiscroll.moveTo(‘firstSection’);2）滚动到第3屏：$.fn.multiscroll.moveTo(3);
setAllowScrolling
setKeyboardScrolling	开启/关闭键盘控制
setScrollingSpeed	设置动画过度时间

回调函数

函数	说明
afterLoad	滚动后的回调函数
onLeave	滚动前的回调函数
afterRender	页面初始化后的回调函数
afterResize	浏览器大小调整后的回调函数

官网：https://alvarotrigo.com/multiScroll/