目前为止实现最好的js模拟滚动功能

JavaScript04

目前为止实现最好的js模拟滚动功能,第1张

simulation-scroll-y 是开源库 finger-mover 的一个插件,该插件的实现功能为移动端纵向模拟滚动。

基于 simulation-scroll-y 插件可以实现很多效果及功能,查看: Full demo

finger-mover 提供中英双语文档。

安装和使用官方文档写的很清楚,这里就贴出地址: finger-mover 中文文档

根据文档介绍他有如下特性:

移动端模拟滚动的库有很多,例如:iscroll、xscroll、better-scroll 等等,那为什么还要一个 simulation-scroll-y 呢?答案是:这并不是一个轮子。不妨做如下对比:

库体积很大一部分是由框架所提供的功能决定的,但是在完成相同功能的前提下,simulation-scroll-y 应该算是最小的。

simulation-scroll-y 作为 finger-mover 的插件,其体积只有 4.42kb,即使加上 finger-mover 本身的 11.12kb 也才只有 15.54kb,关键是 finger-mover 还提供了其他移动的插件,供你选择。

如果你仅仅要实现一个模拟滚动已经下拉刷新、无限滚动的功能,那么使用 simulation-scroll-y 要比你一次性的引入其他框架如 iscroll 等要小的多。如果你要实现轮播图,完全可以使用 finger-mover 的轮播图插件,这比你使用 swiper 要划算的多。

在UC浏览器,手机QQ内的webview 都会出现此类问题。

看下图:

而 simulation-scroll-y 则不会出现这样的问题:

大多数的实现中,当多指操作时,会阻止运动,如下图:

另外一些不阻止滚动的实现中,虽然能滚动,但是也会出现奇葩的bug,如下图所示:

在这个实现中,虽然当第二根手指触摸屏幕时依然能够滚动,但是当拿开第一个手指时,连续滑动第二根手指,第二根手指并不能操作滚动元素,且在第二根手指滑动的过程中,连续使用第一根手指点按屏幕,会出现奇葩滚动动作。

以上问题,在 simulation-scroll-y 则不会出现,无论有几根手指触摸屏幕, simulation-scroll-y 都将控制权交给第一根手指,如果第一个手指拿开,那么第二根手指将继承第一根手指的状态,完美衔接滚动,此功能的实现得益于 Fingerd ,如下图:

一些现有实现中,在下拉刷新后,迅速上滑,然后再滑动下来,你会发现下拉挂掉了,永远收不回去,如下图:

另外的一些实现则规定了下拉刷新的形式:下拉后是停留等待 还是 不停留等待

而 simulation-scroll-y 则是完全给你自定义下拉操作的机会,你可以实现任何形式的下拉刷新操作,另外 simulation-scroll-y 在你滚动页面的过程中完全不会影响下拉操作,详情请查看 pullDown 选项。

简介

slick 是一个基于 jQuery 的响应触摸式幻灯片插件,支持IE8+,Chrome, Firefox, and Safari,具有以下特点:

支持响应式

浏览器支持 CSS3 时,则使用 CSS3 过度/动画

支持移动设备滑动

支持桌面浏览器鼠标拖动

支持循环

支持左右控制

支持动态添加、删除、过滤

支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容:兼容 IE7+ 及其他主流浏览器,若要兼容 IE7,需修改 CSS(slick.css)。

jQuery兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

  <link rel="stylesheet" href="style/slick.css">

  <script src="script/jquery.min.js"></script>

  <script src="script/slick.min.js"></script>

注意:需jQuery 1.7 +

2、HTML

  <div class="slick">

      <div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>

      <div><a href="http://www.dowebok.com"><img src="images/3.jpg" alt=""></a></div>

  </div>

3、JavaScript

  $(function(){

      $('.slick').slick({

          dots: true

      })

  })

参数

参数类型默认值说明

accessibility布尔值true启用Tab键和箭头键导航

autoplay布尔值false自动播放

autoplaySpeed整数3000自动播放间隔

centerMode布尔值false中心模式

centerPadding字符串’50px’中心模式左右内边距

cssEase字符串‘ease’CSS3 动画

customPagingfunctionn/a自定义分页

dots布尔值false指示点

draggable布尔值true启用桌面拖动

easing字符串‘linear’animate() fallback easing

fade布尔值false淡入淡出

arrows布尔值true左右箭头

infinite布尔值true循环播放

lazyLoad字符串‘ondemand’延迟加载,可选 ondemand 和 progressive

onBeforeChange(this, index)methodnull开始切换前的回调函数

onAfterChange(this, index)methodnull切换后的回调函数

onInit(this)methodnull第一次初始化后的回调函数

onReInit(this)methodnull再次初始化后的回调函数

pauseOnHover布尔值true鼠标悬停暂停自动播放

responsiveobjectnull断点触发设置

slide字符串‘div’滑动元素查询

slidesToShow整数1幻灯片每屏显示个数

slidesToScroll整数1幻灯片每次滑动个数

speed整数300滑动时间

swipe布尔值true移动设备滑动事件

touchMove布尔值true触摸滑动

touchThreshold整数5滑动切换阈值,即滑动多少像素后切换

useCSS布尔值true使用 CSS3 过度

vertical布尔值false垂直方向

方法

方法Argument说明

slick()options : object初始化 slick

unslick() 销毁 slick

slickNext() 切换下一张

slickPrev() 切换上一张

slickPause() 暂停自动播放

slickPlay() 开始自动播放

slickGoTo()index : int切换到第 x 张

slickCurrentSlide() 返回当前幻灯片索引

slickAdd()element : html or DOM object, index: int, addBefore: boolAdd a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String

slideRemove()index: int, removeBefore: boolRemove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.

slickFilter()filter : selector or functionFilters slides using jQuery .filter syntax

slickUnfilter() Removes applied filter

slickSetOption(option,value,refresh)option : string(option name), value : depends on option, refresh : 布尔值Sets an option live. Set refresh to true if it is an option that changes the display