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>