scrollInView()
如果可拖动位置超出 滚动阈值,则对容器的滚动位置进行动画处理。
参数
| 名称 | 类型 | 描述 |
|---|---|---|
| duration(opt) | Number |
动画的持续时间(默认 350) |
| gap(opt) | Boolean |
可拖动元素应该被动画到距离容器边缘的额外距离是多少 |
| ease(opt) | ease |
应用于动画的缓动函数(默认 InOutQuad) |
返回
可拖动对象本身
scrollInView() 代码示例
import { createDraggable, utils } from 'animejs';
const [ $scrollInView ] = utils.$('.button');
const draggable = createDraggable('.square', {
container: '.scroll-container',
});
const scrollInView = () => {
draggable.scrollInView(400, 100);
}
// Set the draggable position outside the scroll viewport
draggable.x = 120;
draggable.y = 200;
$scrollInView.addEventListener('click', scrollInView);
<div class="scroll-container scroll-x scroll-y">
<div class="scroll-content">
<div class="large padded grid square-grid">
<div class="square draggable"></div>
</div>
</div>
</div>
<fieldset class="absolute controls">
<button class="button">Scroll in view</button>
</fieldset>