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>