javascript - 使用 HTML Canvas 创建一个类似 div 的元素，将溢出设置为自动

Question

标题可能会产生误导，但这是我能想到的最好的问题摘要。

无论如何，我需要弄清楚如何制作列表或容器，在本例中是一个包含元素列表的普通矩形，可以上下拖动以显示容器中的其他元素。在某种程度上，它类似于带有 slider 但没有 slider 的受限 div。

现在，我有了一个想法，使用 KonvaJS，以前的 KineticJS 将容器中的所有元素放在一个组中，并使组可以在某些方向上拖动等。

但是要注意的是，元素向上或向下的滑动不仅应该是拖动，还应该是轻弹。因此，如果您向上轻弹手指/鼠标，列表会一直滑动，直到结束，速度会根据轻弹强度而变化。如果确定轻弹强度或速度太复杂，那么任何类型的轻弹都需要将整个列表滑动到底部或顶部。

所以这应该类似于您在 android 或 ios 上拥有的标准垂直滑动小部件。现在你对我如何处理这个有什么想法，或者你会如何处理这个。欢迎任何想法。

Answer 1

工作演示:http://jsbin.com/gefuvu/edit?js,output

draggable 属性已经支持普通的拖放操作。为了将拖放限制为垂直滚动，我使用了这个简单的 dragBound:

const group = new Konva.Group({
  draggable: true,
  dragBoundFunc: (pos) => {
    const minY = -group.getClientRect().height + stage.height();
    const maxY = 0;
    const y = Math.max(Math.min(pos.y, maxY), minY);

    return {y, x: 0}
  }
});

“轻弹”实现:

// setup flick
let lastY = null;
let dY = 0;
group.on('dragstart', () => {
  lastY = group.y();
  dy = 0;
});
group.on('dragmove', () => {
    dy = lastY - group.y();
    lastY = group.y();
});
group.on('dragend', () => {
    // if last move is far way it means user move pointer very fast
    // for this case we need to automatically "scroll" group
    if (dy > 5) {
        group.to({
          y: -group.getClientRect().height + stage.height()
        });
    }
    if (dy < -5) {
        group.to({
          y: 0
        });
    }
});