Code Monkey home page Code Monkey logo

infinitescroll's Introduction

无限滚动模块

InfiniteScroll()

依赖:Zepto 或 jQuery

初始化

只能手动初始化

var scroller = new InfiniteScroll(wrapper, scrollHeight, scrollCallback, option);
参数说明
wrapper 需要无限滚动的容器,一个占位的元素将插在此容器最前面,类型为原生DOM,若用jQuery元素,需使用$el[0]获取原生DOM元素
scrollHeight 占位元素的高度,类型为number
scrollCallback 每次滚动将触发的回调函数,将输入一个0~1的小数,代表当前位置在整个可滚动范围的百分比,最上方为0,最下方为1,类型为function
option 可选,为一个object,将接收两个属性:lowExpandhighExpand,分别代表在可滚动范围之前和之后的占位高度,用以避免在最前最后的位置互相跳转时因渲染时间过长而造成的页面停顿感,默认都为输入scrollHeight的0.1倍
暴露方法
setScrollHeight(height) 用于更新可滚动范围,输入参数height类型为number
travelTo(target, callback, option) 用于定位到目标高度,targetobject,可传入两个属性其中一个:scrollprogress,若两个都有定义,则按scroll为准。callback为到达目标位置之后调用的回调函数。默认滚动方向为取就近方向,如从10%到20%,将向下移动;如从10%到90%,将向上移动(10% -> 0%(100%) -> 90%),若指定了option中的towards属性为UPDOWN,将固定为向上、向下移动;若指定了optionjump属性为true(或其他可以转化为true的值),则直接跳到目标位置

infinitescroll's People

Watchers

James Cloos avatar June Wu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.