scrollInView()

如果可拖动元素的位置超出滚动阈值，则动画化容器的滚动位置。

参数

名称	类型	描述
duration^(可选)	`数字`	动画的持续时间（默认 `350`）
gap^(可选)	`布尔值`	可拖动元素应动画化到容器边缘的额外距离
ease^(可选)	`ease`	应用于动画的缓动函数（默认 `InOutQuad`

返回值

可拖动元素自身

scrollInView() 代码示例

import { createDraggable } from 'animejs';

const [ $scrollInView ] = utils.$('.scroll-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-button">Scroll in view</button>
</fieldset>

上一个 下一个