模拟滚动插件,支持滚轮和手势, 手势识别基于any-touch.
any-scroll的滚动实际是通过2个"父子div"的相对位置变化模拟的, 默认使用translate3d, 外层div叫"wrap", 里面用来装载内容的div叫"content".
<div> <!-- warp -->
<div> <!-- content -->
content
</div>
</div>
如果wrap下有多个元素, 那么any-scroll会把他们都构造成content实例, 但是只有一个"激活"状态的content实例, 只有他可以响应滚动, 当然你也可以切换任意content实例为激活.
<!-- warp -->
<div>
<!-- content -->
<div>content-1<div>
<!-- content -->
<div style="position: absolute;z-index:1;top:0;left:0;">
content-2
<div>
<!-- content -->
<div no-scroll>content-3<div>
</div>注意:
- 多个content情况下, 请给第二个子元素做一个"初始定位", 比如
style="position: absolute;z-index:1;top:0;left:0;", any-scroll内部没有默认定位, 这样你可以自定义"位置"和"层级". - 如果不想某个子元素(content)"可滚动", 使用"no-scroll"进行标记.
npm i any-scroll -S首先在页面构造如下html结构, 同时给wrap一个固定尺寸.
<div id="scroll-view" style="height:600px;width:360px;"><!-- wrap -->
<div><!-- content -->
<!-- 你的内容写在这里 -->
<div>
</div>初始化:
import AnyScroll from 'any-scroll';
const el = document.getElementById('scroll-view');
const as = new AnyScroll(el);
// 滚动到x=-100,y=-100的位置.
as.scrollTo([-100,-100]);
// 只控制Y轴,1s内滑动到目标位置
as.scrollTo({y:-100},1000);| 名称 | 默认值 | 说明 |
|---|---|---|
| allow | [true,true] |
是否允许X或Y轴滚动,数组第一位控制X轴 |
| damping | 0.1 |
dampScroll的消损系数,范围0~1 |
| overflowDistance | 100 |
允许超过边界的最大距离,单位"px" |
| render | 查看 | 控制content元素位置变化的函数 |
默认通过translate3d控制content的位移, 如有需要也可改为控制margin或 top(left) 属性.
// 默认
function render(el, [x, y]) {
el.style.setProperty('transform',`translate3d(${x}px, ${y}px,0)`);
}
// 或者改为
function render(el, [x, y]) {
el.style.setProperty('marginLeft', x+'px');
el.style.setProperty('marginTop', y+'px');
}
const as = new AnyScroll({render});监听事件, 默认继承了any-touch的所有手势事件.
| 事件名 | 说明 |
|---|---|
| scroll | 每次滚动 |
| scroll-end | 滚动停止 |
| tap | 单击 |
| press | 按压 |
| pan | 拖拽 |
| swipe | 快滑 |
| rotate | 旋转 |
| pinch | 缩放 |
as.on('scroll-end',()=>{
console.log('滚动停止了');
})滚动到指定位置, 支持时间动画
| 参数名 | 参考值 | 是否可选 | 说明 |
|---|---|---|---|
| distXY | [-100,-200]或{x:-100,y:-200} |
必选 | 目标位置 |
| duration | 1000 | 可选 | 滚动时间,单位毫秒 |
| easing | 参考 | 可选 | 缓动动画函数, 一般不需要修改 |
// 3秒钟移动到x=-100,y=-500的位置.
as.scrollTo([-100,-500],3000);
// 等价写法
as.scrollTo({x:100,y:-500},3000);瞬间移动到目标位置
| 参数名 | 参考值 | 是否可选 | 说明 |
|---|---|---|---|
| distXY | [-100,-200]或{x:-100,y:-200} |
必选 | 目标位置 |
as.moveTo([-100,-200]);移动元素到wrap左上角.
| 参数名 | 参考值 | 是否可选 | 说明 |
|---|---|---|---|
| el | DOM元素 | 必选 | 目标元素 |
| offset | [0,0]或{x:0,y:0} |
可选 | 对目标位置修正, 多滚动的距离 |
| duration | 1000 | 可选 | 滚动时间,单位毫秒 |
| easing | 参考 | 可选 | 缓动动画函数, 一般不需要修改 |
// 滚动到content中的子元素(child-1), 让其左上角和wrap的左上角重合.
const childEl = doucument.getElementById('child-1');
as.scrollToElement(childEl);
// 滚动到child-1下方100px的位置
as.scrollToElement(childEl,{y:100});
// 等价写法
as.scrollToElement(childEl,[,100]);作用同scrollTo,只是滚动效果不同, 其不能指定时间. 仅供插件开发者使用, 模拟快速划动scrollView产生的滚动.
| 参数名 | 参考值 | 是否可选 | 说明 |
|---|---|---|---|
| distXY | [-100,-200]或{x:-100,y:-200} |
必选 | 目标位置 |
| damping | 默认0.1, 范围0~1 | 可选 | 不断靠近目标位置,每次靠近剩余距离的0.1倍. |
as.dampScroll([-100,-200]);如果滚动范围出现异常, 可手动更新.
as.update();获取content实例, 其上有尺寸等数据.
| 参数名 | 参考值 | 是否可选 | 说明 |
|---|---|---|---|
| elOrIndex | number或HTML元素 | 可选 | 查看 ↓ |
- 如是number, 那么会按照wrap下的子元素索引取对应的content实例.
- 如是元素, 那么会递归向上找父元素, 直到找到对应的实例.
- 如果不传默认找当前激活状态的content实例.
as.getContentRef(1);
as.getContentRef(childEl);
as.getContentRef();content实例或null.
如果有多个content实例, 激活指定content实例, 只有激活的content才会响应滚动.
| 参数名 | 是否可选 |
|---|---|
| contentRef | 必选 |
// 激活第二个content实例.
const contentRef = as.getContentRef(1);
as.active(contentRef);wrap元素
as.el; // <div class="any-scroll"></div>any-scroll内部使用了any-touch手势库, 通过as.at可以访问any-touch的实例,从而修改手势行为等, 详情参考any-touch
// 仅对表单元素阻止触发"默认事件"
// 这是any-touch参数的默认值, 在此仅做展示
as.at.set({
preventDefault(e){
if (event.target && 'tagName' in event.target) {
const { tagName } = event.target;
return !/^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(tagName);
}
return false;
}
})注意: 普通开发者谨慎使用, 修改不当会影响滚动效果, 如开发中遇到缺少功能, 大家尽量先提Issue
wrap元素尺寸.
console.log(as.size);as.on('scroll', context=>{
// 当前位置信息
// context === as
console.log(context.xy);
});| 事件名称 | 说明 |
|---|---|
| scroll | 滚动 |
| scrollEnd | 滚动结束 |
| tap | 单击 |
| press | 按压 |
| pressup | 按压释放 |
| pan | 拖拽 |
| swipe | 滑动 |
| pinch | 缩放 |
| rotate | 旋转 |
除了"scroll"和"scroll-end", 其他事件都是any-touch实现的, 其事件对象上包含当前触点/距离/速度等信息, 更多请参考any-touch
as.on('tap', e=>{
// 当前触点x坐标
console.log(e.x)
})any-scroll基于any-touch开发, 所以也支持他的所有手势, 但是为了体积默认只加载了swipe/pan, 开启更多方法:
import AScroll from 'any-scroll';
import tap from '@any-touch/tap';
import swipe from '@any-touch/swipe';
import pinch from '@any-touch/pinch';
import rotate from '@any-touch/rotate';
const as = new AScroll();
// 加载单击手势
as.at.use(tap);
// 加载快划
as.at.use(swipe);
// 加载缩放
as.at.use(pinch);
// 加载旋转
as.at.use(rotate);
as.on('tap',e=>{
});如果wrap下的子元素, 有些你并不想让他"滚动", 可以给其加"no-scroll"标记.
<div>
<div></div> <!-- 能滚动 -->
<div no-scroll></div> <!-- 不能滚动 -->
</div>当content中的子元素发生变化(增/减去/尺寸), any-scroll需要重新计算"可滑动范围".
默认any-scroll内部使用ResizeObserver(caniuse)监视wrap/content尺寸变化, 实现自动更新可滑动范围.
但其兼容性较差, 所以在不支持ResizeObserver的浏览器会使用MutationObserver(caniuse)降级兼容, 其只能监视content的子元素的增/减, 从而更新滑动范围.
如果不在意体积, 可以使用"resize-observer-polyfill", 其可让ResizeObserver兼容到最低IE9.
import ResizeObserver from 'resize-observer-polyfill';
// ⭐注入到全局
window.ResizeObserver = ResizeObserver;
import AnyScroll from 'any-scroll';
const as = new AnyScroll(el);使用实例上的"update"方法更新"可滑动范围".
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent