scrollInView()
如果可拖拽元素的位置超出了滚动阈值,则自动滚动容器以使其可见。
参数
| 名称 | 类型 | 描述 |
|---|---|---|
| duration(可选) | 数字 |
动画的持续时间(默认 350) |
| gap(可选) | 布尔值 |
可拖拽元素在滚动到容器边缘时,额外保留的间距距离 |
| ease(可选) | 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>