画布外套一层画板和一层画框，拖动画布时让画板在画框中滚动
源码 <div id="wrap" style="overflow: auto;height:300px;width:300px;background-color: darkgrey"> <div id="board" style="padding:20px"> <div id="paper"></div> </div></div><script>const paper = new joint.dia.Paper({...}); ... const $PAPER = $("#paper"), $WRAP = $("#wrap"); $PAPER.css('cursor', 'grab'); // 通过jointjs点击事件绑定/解绑wrap的鼠标移动事件 paper.on('blank:pointerdown', function (evt, x, y) { const originX = evt.offsetX, originY = evt.offsetY; $PAPER.css('cursor', 'grabbing'); $WRAP.on('mousemove', function (evt) { let scrollLeft = $WRAP.scrollLeft() - (evt.offsetX - originX); let scrollTop = $WRAP.scrollTop() - (evt.offsetY - originY); scrollLeft = 0 > scrollLeft ? 0 : scrollLeft; scrollTop = 0 > scrollTop ? 0 : scrollTop; $WRAP.scrollLeft(scrollLeft).scrollTop(scrollTop); }); }); paper.on('blank:pointerup', function (evt, x, y) { $PAPER.css('cursor', 'grab'); $WRAP.off('mousemove'); });</script>